Son kullanılanlar

    Açtığınız araçlar burada görünür.

    İlerleme Çubuğu Oluşturucu

    Hareketli ilerleme çubukları tasarlayın

    Bu aracı paylaş

    Sorun bildir

    Sorunu, özel girdilerinizi veya dosyalarınızı eklemeden açıklayın.

    Bu araç ne kadar faydalıydı?

    Bu araç ne kadar faydalıydı?

    İlerleme çubuğunuzu tasarlayın

    Bir şekil ve tema seçin, ardından ayrıntıları ayarlayın.

    Hızlı temalar
    Diğer ayarlar
    Boyutlar ve şekil
    Renkler ve gradyan
    Kenarlık ayarları
    Etiketler
    Animasyon ve efektler

    Önizleme ve kod

    Önizleme arka planı

    Önizleme bu panele sığdırılır. Dışa aktarılan boyutlar ve kod, seçtiğiniz ölçüde tutulur.

    Önizleme güncellendi. Projeniz için hem HTML'i hem CSS'i kopyalayın.

    PNG dışa aktarma önizlemesi

    PNG, statik ve beyaz arka planlı bir çıktıdır. Özgün canvas stilini kullanır: gradyan ve kenarlıklar yalnızca doğrusal çubuklara uygulanır; CSS parlama, çizgi, nabız ve geçiş efektleri canlı önizlemede ve kodda bulunur.

    HTML kodu
    <div class="progress-container">
  <div class="progress-bar"></div>
  <div class="progress-label">
    Yükleniyor... 65%
  </div>
</div>
    CSS stilleri
    .progress-container {
  width: 400px;
  max-width: 100%;
  height: 20px;
  background-color: #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
  
  
}

.progress-bar {
  height: 100%;
  width: 65%;
  background: #3b82f6;
  border-radius: 10px;
  transition: width 1.5s ease-in-out;
  
  
  
}





.progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #1f2937;
  font-weight: bold;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

    HTML ve CSS birlikte kullanılmalıdır. Bunlar sabit bir değeri tanımlar; ilerleme güncellemelerini ve erişilebilirlik anlamlarını uygulamanızda bağlayın.

    Hızlı ipuçları
    • Doğrusal: yükleme göstergeleri ve dosya yüklemeleri.
    • Dairesel: ölçerler ve beceri gösterimleri.
    • Yarım daire: pano metrikleri ve kota kullanımı.
    • Dikey: pil ve depolama göstergeleri.
    • Noktalar: sayfalama ve bir dizideki ilerleme.
    • Adımlı: çok adımlı süreçlerdeki kilometre taşları.

    İlerleme Çubuğu Oluşturucu hakkında, ücretsiz CSS ilerleme çubuğu oluşturma

    Ayarlanabilir renkler, etiketler ve efektlerle güzel, animasyonlu ilerleme çubukları tasarlayın. HTML ve CSS'yi birlikte kopyalayın veya seçilen boyutlarda statik bir PNG dışa aktarın. Altı şekil, altı tema ve üç geçiş eğrisi mevcuttur. PNG ayrı bir canvas görüntüleyicisi kullanır: gradyanlar ve kenarlıklar yalnızca doğrusal çubuklara uygulanır; CSS animasyonu, şeritler ve parlama dahil edilmez. Çevrimiçi sunulan bu İlerleme Çubuğu Oluşturucu aracını entegre etmeden önce çıktıyı hedef düzeninizde inceleyin.

    İlerleme göstergeleri, modern web ve mobil tasarımda temel bir arayüz öğesidir. Kullanıcılara yükleme durumunu, görev tamamlanmasını, beceri yeterliliğini ve hedeflere ulaşılmasını iletir. CSS'yi sıfırdan elle kodlamak yerine görsel düzenleyicimizi kullanarak renkler, köşe yuvarlaklığı, şeritler, gradyanlar ve etiketler dahil her ayrıntıyı yapılandırın; ardından oluşturulan kodu doğrudan projenize kopyalayın.

    Araç, canvas dışa aktarma önizlemesinin yanında gerçek zamanlı bir canlı önizleme sunar; böylece karar vermeden önce ilerleme çubuğunuzun tam olarak nasıl görüneceğini görebilirsiniz. İster gösterge paneli ölçeri, ister dosya yükleme göstergesi, ister çok adımlı sihirbaz, ister nokta tabanlı sayfalama takipçisi oluşturun, İlerleme Çubuğu Oluşturucu uygun stili ve buna uygun temiz kodu sunar.

    Tasarım

    Yeni eklenenler

    Tüm araçlar

    Gizlilik ayarları

    Analiz, reklam ve kişiselleştirme tercihlerinizi seçin. Zorunlu depolama, tema ve kaydedilen araçlar gibi özelliklerin çalışmasını sağlar.

    Zorunlu depolama her zaman etkindir.