Start animation on progress bar when its visible on screen with jquery

Question

since i'm new to jquery i wanted to ask you how i can Start animation on progress bar when its visible on screen with jquery .

this is my query code is not complete I don’t know how i complete:

$(".progress-bar").each(function(){
      var percentage = parseInt($(this).html());
      if(percentage > 0){
        $(this).animate({'width':''+percentage+'%'}, 800);
      }else{
        $(this).css({'color':'black', 'background':'none'}, 800);
      }
    });

and this is Html

<div class="skill">
                        <div class="progress">
                            <div class="progress-bar">100%</div>                                
                        </div>
                        <h5>German</h5>
                   </div>

Thanks for your help in advance

score 0 · Answer 1 · answered Aug 24 '20 at 21:56

Getting idea from How can I tell if a DOM element is visible in the current viewport? you can test the visibility on scroll:

$.fn.inView = function(){
    if(!this.length)
        return false;
    var rect = this.get(0).getBoundingClientRect();

    return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );

};


$(window).one('scroll', function(e) {
    var ele =  $("div.progress-bar:first");
    if (ele.inView()) {
        var percentage = parseInt(ele.text());
        if(percentage > 0){
            ele.animate({'width':''+percentage+'%'}, 800);
        }else{
            ele.css({'color':'black', 'background':'none'}, 800);
        }
    }
});

Start animation on progress bar when its visible on screen with jquery

1 Answers1