How to make a horizontal progress bar using css Transform scale with scale3d?

Asked

Viewed 76 times

-1

var progress = 0.0 => 0.99 => 1;

//tipo de cálculo que eu gostaria...

 var obj = {
           'will-change': 'transform',
           'transform': 'scale3d('+progress+', 1, 1)'
 }

I have two methods that makes modifying the width, but both don’t seem very smooth:

Javascript ES6:

   window.onscroll = function () {
       scrollReading()
    };

    function scrollReading() {
        var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
        var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
        scrolled = (winScroll / height) * 100;

        var ready_bar = {
            width:scrolled + "%"
        }
    }

jQuery:

$(window).scroll(function(){
                    var top = $(window).scrollTop();
                    var height = $(document).height();
                    height = height - $(window).height();
                    var progress = top/height;
                    progress = progress * 100;
                    progress = progress + "%";
                   $("#progress-bar").width(progress);
                    progress = progress.substring(0, progress.length - 2);
                    progress = Math.round(progress * 9007199254740991) / 9007199254740991;
                    progress = progress + "%";
                    if(top / height === 1){
                        progress = "100%";
                    }
                   $("#percentage").html(progress);
                });

1 answer

0


I already solved: It was only divided by 100: 80/100 => 0.8

Reusing the method of Pure Javascript, it was possible to make the effect smooth...

I needed to transform a percentage number, for example: 50% into a fraction, consider that 1 = 100%, that is, half of 1 would be 1/2, which is 0.5 = 50%, because in the attribute transform, fractional percentage is used.

To convert a percentage value into fractionated form, the solution was to divide the percentage by 100, which results in the value of type: 0.x (when it is less than 100%), 1 (when it is 100%), and 1.x when it is more than 100%), where x is the value of the percentage.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.