Merhabalar MTP.V1 Üyeleri ve ziyaretçiler,

Bu platform üzerinde makale veya tanıtım oluştururken ekstra özellikler ve tasarımlar katarak içeriğinizi zenginleştirmek mümkün bugun bu makale ile size ilerleme çubuklarını gösterecek ve kodlarını vereceğiz.

---

<div class="mg-b-20 progress">
<div class="progress-bar wd-25p">&nbsp;</div>
</div>

<div class="mg-b-20 progress">
<div class="bg-success progress-bar wd-35p">&nbsp;</div>
</div>

<div class="mg-b-20 progress">
<div class="bg-warning progress-bar wd-50p">&nbsp;</div>
</div>

<div class="mg-b-20 progress">
<div class="bg-danger progress-bar wd-65p">&nbsp;</div>
</div>

<div class="progress">
<div class="bg-indigo progress-bar wd-75p">&nbsp;</div>
</div>

Class alanındaki bg- kısmına gelecek değeri değiştirerek renk belirleyebilirsiniz renk çeşitleri alttaki tabloda göründüğü gibidir.

Class	Value
class="progress-bar bg-[value]"	primary | success | warning | danger | info | teal | indigo | purple | orange | pink

<div class="mg-b-20 progress">
<div class="progress-bar progress-bar-striped wd-25p">&nbsp;</div>
</div>

<div class="mg-b-20 progress">
<div class="bg-success progress-bar progress-bar-striped wd-35p">&nbsp;</div>
</div>

<div class="mg-b-20 progress">
<div class="bg-warning progress-bar progress-bar-striped wd-50p">&nbsp;</div>
</div>

<div class="mg-b-20 progress">
<div class="bg-danger progress-bar progress-bar-striped wd-65p">&nbsp;</div>
</div>

<div class="progress">
<div class="bg-info progress-bar progress-bar-striped wd-75p">&nbsp;</div>
</div>

Boyut Süper Ekstra Küçük

<div class="mg-b-10 progress">
<div class="ht-2 progress-bar wd-25p">&nbsp;</div>
</div>

<div class="mg-b-10 progress">
<div class="bg-success ht-2 progress-bar wd-35p">&nbsp;</div>
</div>

<div class="progress">
<div class="bg-danger ht-2 progress-bar wd-50p">&nbsp;</div>
</div>

Boyut Ekstra Küçük

<div class="mg-b-10 progress">
<div class="progress-bar progress-bar-xs wd-25p">&nbsp;</div>
</div>

<div class="mg-b-10 progress">
<div class="bg-success progress-bar progress-bar-xs wd-35p">&nbsp;</div>
</div>

<div class="progress">
<div class="bg-danger progress-bar progress-bar-xs wd-50p">&nbsp;</div>
</div>

Küçük boy

<div class="mg-b-10 progress">
<div class="progress-bar progress-bar-sm wd-25p">&nbsp;</div>
</div>

<div class="mg-b-10 progress">
<div class="bg-success progress-bar progress-bar-sm wd-35p">&nbsp;</div>
</div>

<div class="progress">
<div class="bg-danger progress-bar progress-bar-sm wd-50p">&nbsp;</div>
</div>

Normal Boy

<div class="mg-b-10 progress">
<div class="progress-bar wd-25p">&nbsp;</div>
</div>

 

<div class="mg-b-10 progress">
<div class="bg-success progress-bar wd-35p">&nbsp;</div>
</div>

<div class="progress">
<div class="bg-danger progress-bar wd-50p">&nbsp;</div>
</div>

Büyük boy

<div class="mg-b-10 progress">
<div class="progress-bar progress-bar-lg wd-25p">&nbsp;</div>
</div>

<div class="mg-b-10 progress">
<div class="bg-success progress-bar progress-bar-lg wd-35p">&nbsp;</div>
</div>

<div class="progress">
<div class="bg-danger progress-bar progress-bar-lg wd-50p">&nbsp;</div>
</div>

Class alanında tabloda bulunan özellikleri verdiğiniz zaman farklı boyutlar'da ilerleme çizgisi oluşturabilirsiniz.

SINIF	DEĞER
class="progress-bar ht-2"	Sınıfı kullanarak süper ekstra küçük bir ilerleme boyutu  .ht-2.
class="progress-bar progress-bar-xs"	Ekstra küçük bir ilerleme boyutu.
class="progress-bar progress-bar-sm"	Küçük bir ilerleme boyutu.
class="progress-bar progress-bar-lg"	Büyük bir ilerleme boyutu.

<div class="mg-b-10 progress">
<div class="progress-bar wd-50p">50%</div>
</div>

<div class="mg-b-10 progress">
<div class="bg-success progress-bar wd-60p">60%</div>
</div>

<div class="progress">
<div class="bg-danger progress-bar wd-95p">95%</div>
</div>