İçerik'de kullanılabilen Progress, İlerleme Göstergeleri

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.
50%
<div class="mg-b-10 progress">
<div class="progress-bar wd-50p">50%</div>
</div>
60%
<div class="mg-b-10 progress">
<div class="bg-success progress-bar wd-60p">60%</div>
</div>
95%
<div class="progress">
<div class="bg-danger progress-bar wd-95p">95%</div>
</div>
YAZAR HAKKINDA;
arcface
ONUR

Admin

KONU YORUMLARI
YORUM YAP
Image

LAB

İçerik'de kullanılabilen Progress, İlerleme Göstergeleri

Platform üzerin'de makale ve tanıtım oluştururken işinize yarayabilecek bir çok özellik ve tasarım bulunmaktadır. İlerleme çubuğu, göstergesi'de bunlardan biridir.

EN ÇOK OKUNAN 5 MAKALELER
arcface
ONUR Yazdı;

3 yıl önce

Metin2 Karabüyü sura karakteri biyolog görevlerinden ne almalı?Karabüy..

arcface
ONUR Yazdı;

3 yıl önce

metin2 logo psd,Pvp serveriniz için çok güzel logo psd,metin2 server l..

arcface
ONUR Yazdı;

3 yıl önce

Metin2 ninja karakteri biyolog görevlerinden ne almalı?Ninja ile ilgil..

arcface
ONUR Yazdı;

3 yıl önce

Metin2 şaman karakteri biyolog görevlerinden ne almalı?Şaman ile ilgil..

arcface
ONUR Yazdı;

3 yıl önce

Metin2 savaşcı karakteri biyolog görevlerinden ne almalı?Savaşcı ile ..