Progress Bars
This theme has 2 types of layout and all you have to do is change one class. Also, everything is done via data attribute.
|
1 2 3 4 5 6 7 8 |
<div class="progress"> <div class="progress-bar animating" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> <span class="ct-progressBar-text">60% Complete</span> <div class="ct-progressBar-tr"></div> </div> </div> </div> |
|
1 2 3 4 5 6 7 8 |
<div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped animating" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%;"> <span class="ct-progressBar-text">40% Complete (success)</span> <div class="ct-progressBar-tr"></div> </div> </div> </div> |
- aria-valuenow: Percentage this bar should have
- aria-valuemax: Max value
- aria-valuemin: Min value