SnippetUI
← Back to snippets

İlerleme Çubuğu Loader

Bu, üç tür ilerleme çubuğu animasyonu gerçekleştiren bir yükleyici bileşenidir: saf CSS kullanarak derecelendirme, şerit ve darbe.

HTMLCSS

Önizleme

3 tür ilerleme çubuğu animasyonu. JavaScript gerekmez, saf CSS uygulaması.

degrade + ışıltı
çizgili çubuk
darbe çubuğu

Kullanım durumları ve özellikleri

  • Dosya yükleme ilerleme durumu ekranı: CSS animasyonuyla ilerlemeyi ifade etmek için sahte bir çubuk olarak kullanılabilir.
  • 3 çeşit animasyon deseni: Her temaya göre seçim yapabilirsiniz.
  • Saf CSS uygulaması: Çerçeve gerekmez. Yalnızca “@keyframes” ile tamamlayın.
  • Yükseklik serbestçe ayarlanabilir: Sadece .pb-trackın yüksekliğini değiştirin.

Tasarım ve kullanıcı deneyiminin önemli noktaları

  1. Degrade çubuğu: “Arka plan boyutu: %200” ve “arka plan konumu” animasyonuyla ışıltı efekti elde edin.
  2. Şerit çubuğu: “Tekrarlanan doğrusal degrade” ve “arka plan konumu” animasyonlarına sahip akan şeritlerin temsili.
  3. Darbe çubuğu: Yüksek yüklü işleme sırasında aralıklı “opaklıkla” görünen hareketli bir çubuk.

Nasıl kişiselleştirilir

Yüksekliği değiştir:

.pb-track { height: 12px; } /* Kalın */
.pb-track { height: 4px; }  /* İnce */

Degrade rengini değiştir:

.pb-gradient .pb-fill {
  background: linear-gradient(90deg, #06b6d4, #3b82f6, #8b5cf6);
}

Uygulama kodu

<div class="pb-preview-bg">
<div class="pb-item">
  <div class="pb-label">degrade + ışıltı</div>
  <div class="pb-track"><div class="pb-fill pb-gradient-fill"></div></div>
</div>
<div class="pb-item">
  <div class="pb-label">çizgili çubuk</div>
  <div class="pb-track"><div class="pb-fill pb-striped-fill"></div></div>
</div>
<div class="pb-item">
  <div class="pb-label">darbe çubuğu</div>
  <div class="pb-track"><div class="pb-fill pb-pulse-fill"></div></div>
</div>
</div>

<style>
`
.pb-preview-bg {
width: 100%;
max-width: 400px;
display: flex;
flex-direction: column;
gap: 2rem;
}
.pb-item {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pb-label {
color: #fff;
font-size: 0.9rem;
font-family: sans-serif;
}
.pb-track {
width: 100%;
height: 8px;
background: rgba(255,255,255,0.1);
border-radius: 999px;
overflow: hidden;
}
.pb-fill {
height: 100%;
border-radius: 999px;
width: 0%;
}
.pb-gradient-fill {
background: linear-gradient(90deg, #6366f1, #8b5cf6, #ec4899);
background-size: 200% 100%;
animation: pb-slide 2s ease infinite, pb-shimmer 2s linear infinite;
}
.pb-striped-fill {
background-color: #3b82f6;
background-image: repeating-linear-gradient(
  45deg,
  rgba(255, 255, 255, 0.15) 0px,
  rgba(255, 255, 255, 0.15) 10px,
  transparent 10px,
  transparent 20px
);
background-size: 28px 28px;
animation: pb-slide 2.5s ease infinite, pb-stripe 1s linear infinite;
}
.pb-pulse-fill {
background: #10b981;
animation: pb-slide 3s ease infinite, pb-pulse 1.5s ease-in-out infinite alternate;
}
@keyframes pb-slide {
0% { width: 0%; }
80%, 100% { width: 100%; }
}
@keyframes pb-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
@keyframes pb-stripe {
0% { background-position: 0 0; }
100% { background-position: 28px 0; }
}
@keyframes pb-pulse {
0% { opacity: 0.6; }
100% { opacity: 1; box-shadow: 0 0 8px 2px rgba(16, 185, 129, 0.5); }
}
`
</style>

Tarayıcı uyumluluk durumu

TarayıcıUyumluluk durumu
Krom 43+✅ Tamamen uyumlu
Firefox 16+✅ Tamamen uyumlu
Safari 9+✅ Tamamen uyumlu
Kenar 79+✅ Tamamen uyumlu