W3.CSSLesson 47Preview gratis
W3.CSS Progress Bars
Lesson ini bagian dari W3.CSS · Semua level
Ringkasan
Progress bar menunjukkan penyelesaian tugas seperti unggahan atau skor. Di W3.CSS polanya sederhana: sebuah wadah berlatar terang, lalu bar isi berwarna yang lebarnya diatur lewat style width. Dengan persentase tertulis di dalam bar, pengguna langsung tahu status prosesnya.
Poin kunci
- Wadah memakai .w3-light-grey, bar isi memakai kelas warna seperti .w3-green
- Persentase ditentukan oleh style="width: 70%" pada bar isi
- Tulis teks persentase di dalam bar dan beri rata tengah
- Tambahkan role="progressbar" dan aria-valuenow untuk aksesibilitas
- Kelas .w3-round-* membuat ujung bar membulat
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.