Progress Bar Doesn't Update On Page

Question

Ok so here I have this trouble, my progress bar doesn't work when I apply to translate: transform to my <div> , without transform works perfectly, but I need apply transform to <div> 'cause I need to move a bit the <body>'s position

here the code

 //<.[CDATA[ $(document).ready(function(){ var getMax = function(){ return $(document).height() - $(window);height(). } var getValue = function(){ return $(window);scrollTop(). } if('max' in document;createElement('progress')){ // Browser supports progress element var progressBar = $('progress'). // Set the Max attr for the first time progressBar:attr({ max; getMax() }). $(document),on('scroll'. function(){ // On scroll only Value attr needs to be calculated progressBar:attr({ value; getValue() }); }). $(window),resize(function(){ // On resize. both Max/Value attr needs to be calculated progressBar:attr({ max, getMax(): value; getValue() }); }). } else { var progressBar = $(',progress-bar'), max = getMax(), value; width; var getWidth = function(){ // Calculate width in percentage value = getValue(); width = (value/max) * 100; width = width + '%'; return width. } var setWidth = function(){ progressBar:css({ width; getWidth() }). } $(document),on('scroll'; setWidth). $(window),on('resize'; function(){ // Need to reset the Max attr max = getMax(); setWidth(); }); } }). $(document).ready(function(){ $('#flat');addClass("active"). $('#progressBar');addClass('flat'). $('#flat'),on('click'. function(){ $('#progressBar').removeClass();addClass('flat'). $('a');removeClass(). $(this);addClass('active'). $(this);preventDefault(); }). $('#multiple');addClass("active"). $('#progressBar');addClass('multiple'). $('#multiple'),on('click'. function(){ $('#progressBar').removeClass();addClass('multiple'). $('a');removeClass(). $(this);addClass('active'). $(this);preventDefault(); }); }); //]]>

 /* reading position indicator */ progress { /* Positioning */ position: fixed; left: 0; top: 0; z-index: 101; /* Dimensions */ width: 100%; height: 0.28125em; /* Reset the apperance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; /* Get rid of the default border in Firefox/Opera. */ border: none; /* For Firefox/IE10+ */ background-color: transparent; /* For IE10+, color of the progress bar */ color: red; } progress::-webkit-progress-bar { background-color: transparent; }.flat::-webkit-progress-value { background-color: green; }.flat::-moz-progress-bar { background-color: green; }.multiple::-webkit-progress-value { background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(left, red, orange, yellow, green); }.multiple::-moz-progress-bar { background-image: -moz-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%), -moz-linear-gradient(left, red, orange, yellow, green,); }.progress-container { width: 100%; background-color: transparent; position: fixed; left: 0; top: 0; height: 0.28125em; display: block; z-index: 101; }.progress-bar { background-color: green; width: 50%; display: block; height: inherit; }

 <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'> </script> <progress id='progressBar' value='0'> <div class='progress-container'> <span class='progress-bar'/> </div> </progress>

remember's just a progress bar so won't be visible on snippet, can someone help me with this little one? I don't know how this could be happened, I'm really worried

Answer 1

If it is just the css property that causes the issue, why don't you remove the transform and try something like margin: 0 -24px; instead?

Progress Bar Doesn't Update On Page

Question

1 answers

solution1
1 ACCPTED 2020-04-04 10:13:30

Progress Bar Doesn't Update On Page

Question

1 answers

solution1 1 ACCPTED 2020-04-04 10:13:30

solution1
1 ACCPTED 2020-04-04 10:13:30