CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alex Zahir
Alex Zahir

Reputation: 969

jQuery animated circular progress bar

I am using a jQuery script for an animated circular progress bar. Right now the progress bar works when the start button is clicked. I want this progress bar to start when the user scrolls to the div id "stats" automatically. How can this be done?

I have made a fiddle to show what I have so far:
https://jsfiddle.net/rpkcw236/9/

jQuery(document).ready(function($){
$('.pie_progress').asPieProgress({
    namespace: 'pie_progress',
    barsize: '2',
    trackcolor: '#ececea',
    barcolor: '#e6675f'
});
$('#button_start').on('click', function(){
    $('.pie_progress').asPieProgress('start');
});
$('#button_finish').on('click', function(){
     $('.pie_progress').asPieProgress('finish');
});
$('#button_go').on('click', function(){
     $('.pie_progress').asPieProgress('go',50);
});
$('#button_go_percentage').on('click', function(){
    $('.pie_progress').asPieProgress('go','50%');
});
$('#button_stop').on('click', function(){
    $('.pie_progress').asPieProgress('stop');
});
$('#button_reset').on('click', function(){
    $('.pie_progress').asPieProgress('reset');
});
});

Here is the link to the script I am using:
http://www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html

Upvotes: 3

Views: 2333

Answers (2)

Dev
Dev

Reputation: 410

You need to break it up into 2 steps: 1) get the distance of the dynamic div from the top. 2) Once you get the top value pass this top value to the code in step2.

Step1: Get the dynamic div position from the top (e.g. #my-dynamic-div)

    var $output = $('#output');
    $(window).on('scroll', function () {
    var scrollTop     = $(window).scrollTop(),
    elementOffset = $('#my-dynamic-div').offset().top,
    distance      = (elementOffset - scrollTop);
    $output.prepend('<p>' + distance + '</p>');
    });

    OR

    E.G: var distance = $("#MyDiv").offset().top

ref: http://jsfiddle.net/Rxs2m/

Step2: Pass the distance value here instead of the hard coded value 350.

flag=true;

$(window).scroll(function() {
st=$(window).scrollTop();
$('#topscroll').html(st)


if(st>350){
    if(flag)
     $('.pie_progress').asPieProgress('start');
    flag=false;
}
});

Good luck & hope this helps.

Upvotes: 3

guest271314
guest271314

Reputation: 1

Try using .scrollTop() , .offset().top Element.getBoundingClientRect() of #progress element, .off()

  $(window).on("scroll", function() {
    if ($("#progress")[0].getBoundingClientRect().top < 150) {
      $('.pie_progress').asPieProgress('start')
      $(this).off("scroll")
    }
  })

jsfiddle https://jsfiddle.net/rpkcw236/29/

Upvotes: 2

Related Questions