İçindekiler

UCH Wiki Syntax Progress Bar

Options

Attribute Default Value Allowed Values Description
type info success info warning danger Type of progress bar
animate optional true Animate the progress bar
striped optional true Add a striped effect to progress bar
showvalue optional true Display current value of progress bar

Examples

Basic

60% 
<progress>
<bar value="60"></bar>
</progress>

With label

60%
<progress>
<bar value="60" showvalue="true"></bar>
</progress>

Contextual alternatives

40%
20%
60%
80% 
<progress>
<bar value="40" type="success"></bar>
</progress>
 
<progress>
<bar value="20" type="info"></bar>
</progress>
 
<progress>
<bar value="60" type="warning"></bar>
</progress>
 
<progress>
<bar value="80" type="danger"></bar>
</progress>

Striped

40%
20%
60%
80% 
<progress>
<bar value="40" type="success" striped="true"></bar>
</progress>
 
<progress>
<bar value="20" type="info" striped="true"></bar>
</progress>
 
<progress>
<bar value="60" type="warning" striped="true"></bar>
</progress>
 
<progress>
<bar value="80" type="danger" striped="true"></bar>
</progress>

Animated

Add animate=“true” to a striped progress bar to animate the stripes right to left. Not available in IE9 and below.

45% 
<progress>
<bar value="45" type="info" striped="true" animate="true"></bar>
</progress>

Stacked

Place multiple bars into the same <progress/> tag to stack them.

35%
20%
10% 
<progress>
<bar value="35" type="success" striped="true"></bar>
<bar value="20" type="warning" striped="true"></bar>
<bar value="10" type="danger" striped="true"></bar>
</progress>

Taken from UCH Wiki. https://wiki.ulascemh.com/doku.php?id=syntax:progress