Documentation leh Bootstrap custom progress bar hman dan entirnan stacked bar, animated background, leh text label te support a awm.
A hnathawh dan
Progress components te hi HTML element pahnih hmanga siam a ni a, CSS thenkhat chu a zau zawng set turin an siam a, attribute tlemte an nei bawk. HTML5 <progress>
element kan hmang lo va , progress bars stack theih a ni a, animate theih a, a chungah text label dah theih a ni tih kan enfiah a ni.
.progress
Progress bar a max value tarlan nan as a wrapper kan hmang thin .
.progress-bar
Tun thlenga hmasawnna tarlanna atan chhungril lam kan hmang thin .
The .progress-bar
hian an width set tur chuan inline style, utility class, emaw custom CSS emaw a mamawh a ni.
The pawh hian a hmuh theih nan .progress-bar
thenkhat role
leh attribute a mamawh bawk.aria
Chu zawng zawng chu han dah khawm la, a hnuaia entîrnate hi i nei a ni.
Copy tur a ni
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" aria-valuenow= "0" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 25%" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 75%" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 100%" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Bootstrap hian width setting na tur utility tlemte a pe a . I mamawh dan azirin, hengte hian hmasawnna rang taka configure-naah a pui thei a ni.
Copy tur a ni
<div class= "progress" >
<div class= "progress-bar w-75" role= "progressbar" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Labels te pawh a awm
I progress bar-ah label te dah la, .progress-bar
.
Copy tur a ni
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 25%;" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" > 25%</div>
</div>
Sanzawng
We set a height
value on the .progress
, chuvangin chu value chu i thlak chuan inner .progress-bar
chu automatic in a resize ang a, a resize ang.
Copy tur a ni
<div class= "progress" style= "height: 1px;" >
<div class= "progress-bar" role= "progressbar" style= "width: 25%;" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" style= "height: 20px;" >
<div class= "progress-bar" role= "progressbar" style= "width: 25%;" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Backgrounds te pawh a awm
Background utility class hmangin progress bar pakhat zel awm dan thlak danglam rawh.
Copy tur a ni
<div class= "progress" >
<div class= "progress-bar bg-success" role= "progressbar" style= "width: 25%" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-info" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-warning" role= "progressbar" style= "width: 75%" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar bg-danger" role= "progressbar" style= "width: 100%" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Bar tam tak a awm
I mamawh chuan progress component pakhatah progress bar tam tak dah tel bawk ang che.
Copy tur a ni
<div class= "progress" >
<div class= "progress-bar" role= "progressbar" style= "width: 15%" aria-valuenow= "15" aria-valuemin= "0" aria-valuemax= "100" ></div>
<div class= "progress-bar bg-success" role= "progressbar" style= "width: 30%" aria-valuenow= "30" aria-valuemin= "0" aria-valuemax= "100" ></div>
<div class= "progress-bar bg-info" role= "progressbar" style= "width: 20%" aria-valuenow= "20" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Striped a ni
Progress bar background color chungah CSS gradient hmanga stripe apply .progress-bar-striped
turin any ah dah rawh ..progress-bar
Copy tur a ni
<div class= "progress" >
<div class= "progress-bar progress-bar-striped" role= "progressbar" style= "width: 10%" aria-valuenow= "10" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-striped bg-success" role= "progressbar" style= "width: 25%" aria-valuenow= "25" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-striped bg-info" role= "progressbar" style= "width: 50%" aria-valuenow= "50" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-striped bg-warning" role= "progressbar" style= "width: 75%" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
<div class= "progress" >
<div class= "progress-bar progress-bar-striped bg-danger" role= "progressbar" style= "width: 100%" aria-valuenow= "100" aria-valuemin= "0" aria-valuemax= "100" ></div>
</div>
Animated stripe te pawh a awm
Striped gradient pawh animated theih a ni bawk. CSS3 animation hmanga stripe dinglam atanga veilam animate turin Add .progress-bar-animated
to ..progress-bar
Animation chu toggle rawh
Copy tur a ni
<div class= "progress" >
<div class= "progress-bar progress-bar-striped progress-bar-animated" role= "progressbar" aria-valuenow= "75" aria-valuemin= "0" aria-valuemax= "100" style= "width: 75%" ></div>
</div>