Proiecte internaţionale

Round progress bars

Category: Add-ons Written by Super User Hits: 303

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>