İlerleme çubuklarını(Progress barlarını),progress sınıfına sahip bir <div> etiketi içine ekleyeceğimiz bir başka <div> etiketine
"progress bar" sınıfını ekleyerek oluşturabiliriz.
Progress bar'ın "width"özelliğine vereceğimiz yüzde oranı ilerleme çubuğunda görsel olarak ne kadar yer kaplanacağını belirler.
İlerleme çubuğu(Progress bar)oluşturmak için bazı parametreler vardır. Bunlar:
aria-valuenow : Progress barın değeri
aria-valuemin : Minimum progress bar değeri
aria-valuemax : Maksimum progress bar değeri
style : width değeri vererek görsel olarak değeri ilerletmeye yarar.
%80 yer kaplandığını veya ilerlendiğini gösteren bir ilerleme çubuğunu aşağıdaki kodları yazarak oluşturabiliriz.
<div class="progress">
<div class="progress-bar " role="progressbar" style="width:80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%"></div>
</div>
Width değerine %40 verdiğimizde ise ilerleme çubuğu şu şekilde olur :
Height özelliği ise ilerleme çubuğunun yüksekliğini belirler.
Height değeri 10px olan bir ilerleme çubuğunu aşağıdaki kodları yazarak oluşturabiliriz :
<div class="progress" style="height: 10px;">
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0"aria-valuemax="100</div>
</div>
Height değerine 30px verdiğimizde ise ilerleme çubuğu şu şekilde olur :
Ne kadar yer kaplandığı veya ilerlendiği çubuk üzerinde gösterilebilir.
Göstermek istediğimiz değeri koda ekleyerek oluşturabiliriz.
<div class="progress">
<div class="progress-bar " role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">%80</div>
</div>
ANİMASYONLU İLERLEME ÇUBUĞU
"progress-bar progress-bar-striped active" sınıfını kullanarak animasyonlu ilerleme çubuğu oluşturabiliriz.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar"aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">80%</div>
</div>
ÇİZGİLİ İLERLEME ÇUBUĞU
<div class="progress">
<div class="progress-bar progress-bar-striped" role="progressbar"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width:80%">80%</div>
</div>
İlerleme çubuğu başlangıçta mavi renkli olarak ayarlıdır,çeşitli sınıflar kullanarak rengini değiştirebiliriz.
Çeşitli renk sınıfları vardır :
. progress-bar-success
. progress-bar-info
. progress-bar-warning
. progress-bar-danger
Aşağıdaki örnek kodla farklı renkte ilerleme çubukları oluşturabiliriz.
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">%40 futbol </div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"style="width:50%">%50 voleybol</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"aria-valuemin="0" aria-valuemax="100" style="width:60%">%60 basketbol</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="70"aria-valuemin="0" aria-valuemax="100" style="width:70%">%70 tenis</div>
</div>
ÇOKLU İLERLEME ÇUBUĞU
<div class="progress">
<div class="progress-bar progress-bar-success" role="progressbar">
style="width:40%">Futbol</div><div> class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">Voleybol</div><div> class="progress-bar progress-bar-danger" role="progressbar" style="width:50%">Basketbol</div>
</div>
30 px yüksekliğinde çoklu ve animasyonlu bir ilerletme çubuğunu aşağıdaki kodlarla yazabiliriz.
<div class="progress" style="height: 30px" >
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" style="width:45%">Futbol</div>
<div class="progress-bar progress-bar-warning progress-bar-striped active" role="progressbar" style="width:50%">Voleybol</div>
<div class="progress-bar progress-bar-danger progress-bar-striped active" role="progressbar" style="width:100%">Basketbol</div>
</div>
HAZIRLAYAN : SABİHA GÖKÇEN TUN