Birincil, ikincil, vurgulu ve anlamsal renk çeşitlerine sahip yalnızca CSS Tailwind CSS ilerleme çubuğu. Boyutlar xs-xl. WCAG AA'ya erişilebilir; Django, HTMX, Laravel, React ve herhangi bir yığınla çalışır.
İlerleme bileşenleri; görevlerin, indirmelerin veya çok adımlı süreçlerin tamamlanma durumunu görselleştirir. Anlamsal HTML ilerleme öğeleri ve Tailwind CSS stiliyle oluşturulan ilerleme çubukları, ilerlemeyi kullanıcılara net bir şekilde iletir. Frutjam ilerleme sistemi, yükleme ekranlarına, formlara ve kontrol panellerine esnek entegrasyon için birden fazla rengi, boyutu ve animasyon durumunu destekler.
Yalnızca CSS, JavaScript gerekmez. WCAG AA erişilebilir ve çerçeveden bağımsız — Django, HTMX, Laravel, React ve tüm yığınlarla çalışır.
| Sınıf | Tip | Tanım |
|---|---|---|
| progress | Temel | Yatay ilerleme çubuğu |
| progress-primary | Renk | Birincil tema rengi |
| progress-secondary | Renk | İkincil tema rengi |
| progress-accent | Renk | Vurgu teması rengi |
| progress-neutral | Renk | Nötr tema rengi |
| progress-info | Renk | Bilgi anlamsal rengi |
| progress-success | Renk | Başarı anlamsal rengi |
| progress-warning | Renk | Uyarı anlamsal rengi |
| progress-error | Renk | Hata anlamsal rengi |
Renk çeşitleri
Varsayılan
1 2 3 4 5 | <progress class="progress w-56" value="0" max="100"></progress> <progress class="progress w-56" value="25" max="100"></progress> <progress class="progress w-56" value="50" max="100"></progress> <progress class="progress w-56" value="75" max="100"></progress> <progress class="progress w-56" value="100" max="100"></progress> |
1 2 3 4 5 | <progress className="progress w-56" value="0" max="100"></progress> <progress className="progress w-56" value="25" max="100"></progress> <progress className="progress w-56" value="50" max="100"></progress> <progress className="progress w-56" value="75" max="100"></progress> <progress className="progress w-56" value="100" max="100"></progress> |
Öncelik
html
1 2 3 4 5 | <progress class="progress progress-primary w-56" value="0" max="100"></progress> <progress class="progress progress-primary w-56" value="25" max="100"></progress> <progress class="progress progress-primary w-56" value="50" max="100"></progress> <progress class="progress progress-primary w-56" value="75" max="100"></progress> <progress class="progress progress-primary w-56" value="100" max="100"></progress> |
İkincil
html
1 2 3 4 5 | <progress class="progress progress-secondary w-56" value="0" max="100"></progress> <progress class="progress progress-secondary w-56" value="25" max="100"></progress> <progress class="progress progress-secondary w-56" value="50" max="100"></progress> <progress class="progress progress-secondary w-56" value="75" max="100"></progress> <progress class="progress progress-secondary w-56" value="100" max="100"></progress> |
Aksan
html
1 2 3 4 5 | <progress class="progress progress-accent w-56" value="0" max="100"></progress> <progress class="progress progress-accent w-56" value="25" max="100"></progress> <progress class="progress progress-accent w-56" value="50" max="100"></progress> <progress class="progress progress-accent w-56" value="75" max="100"></progress> <progress class="progress progress-accent w-56" value="100" max="100"></progress> |
Doğal
html
1 2 3 4 5 | <progress class="progress progress-neutral w-56" value="0" max="100"></progress> <progress class="progress progress-neutral w-56" value="25" max="100"></progress> <progress class="progress progress-neutral w-56" value="50" max="100"></progress> <progress class="progress progress-neutral w-56" value="75" max="100"></progress> <progress class="progress progress-neutral w-56" value="100" max="100"></progress> |
Bilgi
html
1 2 3 4 5 | <progress class="progress progress-info w-56" value="0" max="100"></progress> <progress class="progress progress-info w-56" value="25" max="100"></progress> <progress class="progress progress-info w-56" value="50" max="100"></progress> <progress class="progress progress-info w-56" value="75" max="100"></progress> <progress class="progress progress-info w-56" value="100" max="100"></progress> |
Başarı
html
1 2 3 4 5 | <progress class="progress progress-success w-56" value="0" max="100"></progress> <progress class="progress progress-success w-56" value="25" max="100"></progress> <progress class="progress progress-success w-56" value="50" max="100"></progress> <progress class="progress progress-success w-56" value="75" max="100"></progress> <progress class="progress progress-success w-56" value="100" max="100"></progress> |
Uyarı
html
1 2 3 4 5 | <progress class="progress progress-warning w-56" value="0" max="100"></progress> <progress class="progress progress-warning w-56" value="25" max="100"></progress> <progress class="progress progress-warning w-56" value="50" max="100"></progress> <progress class="progress progress-warning w-56" value="75" max="100"></progress> <progress class="progress progress-warning w-56" value="100" max="100"></progress> |
Hata
html
1 2 3 4 5 | <progress class="progress progress-error w-56" value="0" max="100"></progress> <progress class="progress progress-error w-56" value="25" max="100"></progress> <progress class="progress progress-error w-56" value="50" max="100"></progress> <progress class="progress progress-error w-56" value="75" max="100"></progress> <progress class="progress progress-error w-56" value="100" max="100"></progress> |
Claude Code, Cursor veya başka bir AI düzenleyiciyi mi kullanıyorsunuz?
Cherry MCP, AI editörünüze talep üzerine tam İlerlemek sınıf adlarını ve yapısını verir. Artık halüsinasyonlu dersler yok.