How to make my animated skills bar responsive

Question

I have an animated skills bar on my website, which fires when the section scrolls into view. Everything is working well so far. Except when the viewport changes/window resizes the animated bars won't adjust to it and will be too long or to short.

I tried to solve this problem with $(window).resize(function(){location.reload(); but on mobile viewport it keeps refreshing the page even though I'm just scrolling.

I already searched the net to see if there is a way to just reload the specific jquery function, but couldn't find anything. Or to be honest I didn't quite understood I guess, and couldn't get it working. Here is what I found: https://css-tricks.com/forums/topic/reload-jquery-functions-on-ipad-orientation-change/

I read there is a way to make the website reload the whole js file. But since I still have other animations on my page, I don't know if this is the best way to do it.

I'm glad if anyone could help me with this. I'm very new to coding and my js/jquery knowledge is still very limited/non-existent.

here is my script for the bar animation

  var $meters = $(".meter > span");
    var $section = $('#skills .meter');
    var $queue = $({});

    function loadDaBars() {
        $meters.each(function() {
            var $el = $(this);
            var origWidth = $el.width();
            $el.width(0);
            $queue.queue(function(next) {
                $el.animate({width: origWidth}, 800, next);
            });
        });
    }

    $(document).bind('scroll', function(ev) {
        var scrollOffset = $(document).scrollTop();
        var containerOffset = $section.offset().top - window.innerHeight;
        if (scrollOffset > containerOffset) {
            loadDaBars();
            $(document).unbind('scroll');
        }
    });

the width for the skillbar is defined via div class and span in %. Maybe there is a css solution to this?

edit: this is how my html and css code looks like

 .meter { background-color: hsla(54, 73%, 95%, 1); vertical-align: bottom; width: 100%; position: relative; } .meter>span { display: block; background-color: rgb(241, 233, 166); position: relative; overflow: hidden; } 

 <div class="col-lg-6 col-md-6 col-sm-6"> <div class="meter"> <span style="width: 50%"></span> </div> 

Answer 1

You remove the style property of the bar once the animation has finished. This way the css rule will apply again:

$el.animate({width: origWidth}, {duration: 800, complete: function (){$el.removeAttr('style')}}, next);

(Assuming the width defined by the css is responsive)