Yayasan progress bar
Yayasan dapat digunakan sebagai progress bar untuk menunjukkan pengolahan program gelar:
Kami dapat <div> menggunakan elemen .progress kelas untuk membuat progress bar, .meter kelas untuk elemen anak (<span>). Kita dapat mengatur persentase kemajuan dalam <span> elemen, sebagai berikut:
Progress bar warna
Secara default, progress bar warna biru. warna yang berbeda dari kelas: .secondary , .success , atau .alert :
contoh
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
<Div class = "kemajuan sekunder" >
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
<Div class = "kemajuan sukses" >
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
<Div class = "kemajuan alert" >
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
Coba »
Fillet progress bar
.radius dan .round kelas digunakan untuk menambahkan sudut dibulatkan untuk progress bar:
contoh
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
<Class Div = "radius kemajuan" >
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
<Class Div = "kemajuan bulat" >
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
Coba »
Sebuah Ukuran progress bar
Anda dapat menggunakan .small- num atau .large- num untuk memodifikasi lebar progress bar, num adalah nomor antara 1 (8,33%) dan 12 (default (100%)) :
contoh
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
<Class Div = "kemajuan besar- 6">
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
<Class Div = "kemajuan besar- 9">
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
<Class Div = "kemajuan besar- 11">
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
<! - Lebar default ->
<Class Div = "kemajuan besar- 12">
<Span class = "meter" gaya = "width: 50%"> </ span>
</ Div>
Coba »
label bar kemajuan
CSS dapat digunakan untuk menandai progress bar. Contoh berikut kami menambahkan <span> elemen untuk menampilkan persentase:
contoh
.percentage {
position: absolute;
top: 50%;
kiri: 50%;
warna: putih;
transform: menerjemahkan (-50%, -50%);
font-size: 12px;
}
</ Style>
<Div class = "kemajuan">
<Span class = "meter" gaya = "position: relative; width: 75%">
<Span class = "persentase"> 75% </ span>
</ Span>
</ Div>
<Div class = "kemajuan sukses" >
<Span class = "meter" gaya = "position: relative; width: 50%">
<Span class = "persentase"> 50% </ span>
</ Span>
</ Div>
<Div class = "kemajuan alert" >
<Span class = "meter" gaya = "position: relative; width: 25%">
<Span class = "persentase"> 25% </ span>
</ Span>
</ Div>
Coba »