Menu
I am trying to make a YouTube-like progress bar. The bar should load at the page startup. I have tried this so far. Here is the code of my script
$({property: 0}).animate({property: 105}, { duration: 4000, step: function() { var _percent = Math.round(this.property); $('#progress').css('width', _percent+"%"); if(_percent == 105) { $("#progress").addClass("done"); } }, complete: function() { alert('complete'); } }); I am also including the jsFiddle of the same, http://jsfiddle.net/ajaSB/3/.
In this jsfiddle, the progress bar appears, but when I use the same code in my IDE and run the file no progress bar appears. What am I doing wrong? Or if there is another way to get the bar?
942
Instead you can find more details on these features on How to use Chapter/Seeking features. The video progress bar makes it easy to check where you left off the last time you watched a video. When you leave a video without finishing it, a bar under the video thumbnail shows you where you left off.
Solution #1: Activating full-screen mode using the shortcut (F) Activating the full-screen mode is one of the easiest ways of dealing with the YouTube progress bar issue. Once the video starts playing in full-screen mode, the bar will disappear after a few seconds of not moving the mouse around.
The high or tall waves of the bar indicate the parts that are frequently replayed by the viewers, while the low ones are those commonly skipped. “If the graph is high, then that part of the video has been replayed often. You can use the graph to quickly find and watch those moments,” notes YouTube.
NProgress.js is a very cool and simple library. The Git repository is here. It has an MIT License.
70
Here is example of a complete HTML page including reference to the jQuery library.
Although it will mostly work without, you should wrap your code in a $(document).ready(...) so that you are sure all required resources are loaded before you run the code.
<!DOCTYPE html> <html> <head> <title>Progress Test</title> <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $({property: 0}).animate({property: 105}, { duration: 4000, step: function() { var _percent = Math.round(this.property); $("#progress").css("width", _percent+"%"); if(_percent == 105) { $("#progress").addClass("done"); } }, complete: function() { alert("complete"); } }); }); </script> <link href="css/progressbar.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="progress" class="waiting"> </body> </html> Note that this targets version 2 of jQuery, which does not support Internet Explorer 8 and earlier. If you need support for old Internet Explorer versions, you should target jQuery 1.10.2 instead.
If the progress bar does not show, but you do get the alert("complete") after four seconds when the animation should be finished, it is likely that your reference to the CSS is wrong (not pointing to the right place, or misspelled file name).
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
