Round progress bars

options:

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>