How can I animate a progress bar's width changing?

StackOverflow https://stackoverflow.com/questions/22309110

  •  12-06-2023
  •  | 
  •  

سؤال

I'm using a file reader to load images into a html5 canvas; i'm trying to build a progress bar; it works but its behaviour is not very smooth... I mean that the bar starts from a size of 0 px and then increase but in a jerky way; Is it possible to have a smoother bar size increasing?

The code:

reader.readAsDataURL(file);

function updateProgress(evt) {
    jQuery('.file-loading-bar').width(100 * (evt.loaded / evt.total) + '%');
}

reader.onloadstart = function() {
    jQuery('.file-loading-bar').width(0);
}

reader.onprogress = updateProgress;
هل كانت مفيدة؟

المحلول 2

Here is a small sample that I put together to show how to do smooth interpolation of the value of an HTML5 <progress> bar. It doesn't tie in to the actual file API because I didn't want to have to keep copying giant files into browser cache to try and test this thing. However, the main point is that whenever you have an onprogress trigger, you want to call the addProgress() function. Do get rid of the setTimeout()s though because they are only there to simulate progress.

jsFiddle

HTML/JS

<!DOCTYPE html>
<html>
   <head>
      <title>Smooth Progress Bar</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width">
      <script src="js/libs/jquery/jquery.js"></script>
   </head>
   <body>
      <!--Our progress bar-->
      <progress id="mybar" value="20" max="100"></progress>

      <!--Our button to start progress simulation-->
      <button id="start">Start</button>

      <!--Our small script to simulate progress-->
      <script>
         // The progress bar element
         var bar = document.getElementById("mybar");

         // Add a listener to simulate progress
         $("#start").click(doProgress);

         // Our function that causes progress to be added
         function addProgress() {
            /*
             * Create an animation that will interpolate a value from the
             * current value of the progress bar to the actual new value
             * of the progress bar.
             */
            $({
               // The value at present
               interpVal: bar.value
            }).animate({
               // The new value after progress has happened
               interpVal: bar.value + 10
            },
            {
               // How long this interpolation should take
               duration: 200,
               // The function to set the progress bar's value to the inter val
               step: function() {
                  bar.value = this.interpVal;
               }
            });

            // Check to see if we should end our simulation
            if (bar.value < bar.max) {
               // If we aren't at max, keep progressing
               setTimeout(addProgress, 2000);
            }
         }

         // Function to bootstrap our progress
         function doProgress() {
            setTimeout(addProgress, 500);
         }
      </script>
   </body>
</html>

نصائح أخرى

You can use CSS3:

.file-loading-bar {
  -webkit-transition: width 0.5s;
          transition: width 0.5s;
}

I was having trouble with this same issue tonight and figured out a solution -- this is for Chrome so you might need to adjust the -webkit prefix as needed. Test this CSS out:

progress::-webkit-progress-value {
  transition:width 1s linear
}

progress[value] {
   -webkit-appearance: none;
  width: 300px;
  height: 30px;
}

User @jbalsas made a jsfiddle that demonstrates an progress bar being controlled with an audio element -- here is an updated jsfiddle with the CSS I added. (the audio loads an MP3.. so run it in Chrome but not Chromium) Update the CSS styling as needed.. there's some other answers on S.O. that show how to add additional style.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top