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 | 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. |
<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>
To make custom styles for your round progress bars you can use following CSS on your progress bar element.
.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 }
<div class="my_progress_bar" data-yjsg-round-progress data-start="5" data-end="38" data-speed="20" data-border="10"></div>
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.
<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>