A SCSS file for creating a round progress bar.
Just compile the progress-bar.scss and add the resultant .css file to your project, using the following markup to create a Round Progress Bar:
For a 20% completed (with value inside):
<div class="p20 progress-container">
<div class="progress-bar"></div>
<div class="progress-value">20%</div>
</div>For a 45% completed (without value inside):
<div class="p45 progress-container">
<div class="progress-bar"></div>
</div>Changing the number in .p(number) class for a value from 1 to 100 will change the completed percentage.
The provided SCSS file contains 5 variables at the top to customize the colors and the size of the Round Progress Bar:
$progress-bar-size
$progress-bar-bar-size
$progress-bar-color
$progress-bar-bar-color
$progress-bar-inner-color