A progress bar shows the progression of a task.
you can use the progress bar theme by simply create an element with class progress-bar and a data attribute for percent value data-value and then put inside of it A span element with class bar.
<div class="progress-bar" data-value="20"><span class="bar"></span></div>
<div class="progress-bar success" data-value="35"> <span class="bar"></span> </div>
<div class="progress-bar warning" data-value="55"> <span class="bar"></span> </div>
<div class="progress-bar error" data-value="70"> <span class="bar"></span> </div>
<div class="progress-bar disabled" data-value="85"> <span class="bar"></span> </div>
to color the progress bar simply add A data attribute data-color with a value of the color hex code see the code below. and to show the percent text value on the bar add class textual
<div class="progress-bar textual" data-value="40" data-color="#3498db"> <span class="bar"></span> </div>
<div class="progress-bar textual small" data-value="30" data-color="#3498db"> <span class="bar"></span> </div>
<div class="progress-bar textual" data-value="50" data-color="#3498db"> <span class="bar"></span> </div>
<div class="progress-bar textual large" data-value="70" data-color="#3498db"> <span class="bar"></span> </div>