Round progress bars are very useful if you would like to display appealing number progress. To activate the round progress simply add data-yjsg-round-progress
to your element. Note that by default the counter width and height is 150px and color is blue.
See options below if you wish to modify the defaults.
options:
Options |
Description |
data-yjsg-round-progress |
*Required option. This data property will activate round progress bar. |
data-start |
This is a counter start. Default is 0 |
data-end |
This is a counter end. Default is 100 |
data-border |
This is a counter border width. Default is 5 ( 5px ). |
data-percent |
This will show percent sign. Default is true. |
data-speed |
Progress speed. Default is 10. |
example:
markup:
<div class="mybar yjsg-center" data-yjsg-round-progress data-start="8" data-end="88"></div>
<div class="yjsg-center" style="color:#ff6600;border-top-color:#ff6600;border-bottom-color:#efefef;" data-yjsg-round-progress data-start="0" data-end="58" data-border="10" data-speed="20" data-percent="false"></div>
<div class="mybar yjsg-center" data-yjsg-round-progress data-start="28" data-end="78"></div>
Custom styling
To make custom styles for your round progress bars you can use following CSS on your progress bar element.
code:
.my_progress_bar{
width:200px; // progress width
height:200px;// progress height
font-size:20px; // progress font size
color:#ff6600; // progress font color
border-top-color:#2ecc71; // progress top color
border-bottom-color:#efefef; // progress bottom color
}
example:
markup:
<div class="my_progress_bar" data-yjsg-round-progress data-start="5" data-end="38" data-speed="20" data-border="10"></div>
Activate progress bar when in view
To activate progress bar when in view you can use
Waypoints jQuery
plugin that comes with Yjsg framework. Please note that in this case you should not use data-yjsg-round-progress
data attribute but yjsg-round-progress
element class instead. Please use below code example as reference.
example:
markup:
<script>
jQuery(document).on('ready', function () {
jQuery('.mybar_in_view').waypoint(function() {
jQuery(this).yjsgroundprogress();
}, {
offset: '100%',
triggerOnce:true
});
});
</script>
<div class="mybar_in_view yjsg-round-progress" data-start="0" data-end="90" data-speed="10"></div>