Indicate progress with three versions of Progress Bars!
Screenshots
— ct-progressBar–type1
Progress bar type1
— ct-progressBar–type2
Progress bar type2
— ct-progressBar–type3
Progress bar type3
You can edit bars values and colors with data-attributes used with the following HTML markup
|
1 2 3 4 5 6 7 8 9 10 |
<div class="ct-progressBar ct-progressBar--type1"><!-- Progress Bar type 1 --> <div class="ct-progressBar-title">WebDesign</div> <div class="progress"> <div class="progress-bar animating" role="progressbar" aria-valuenow="51" aria-valuemin="0" aria-valuemax="100"> <div class="ct-progressBar-content"> <span class="ct-progressBar-text">51%</span> </div> </div> </div> </div> |
Java Script
|
1 |
<script src="../assets/js/progressbars/init.js"></script> |