6 ms·
Rebuild YouTube's mobile-like progress bar in jQuery
- ezraroi 13y agoNicely done and handful. Thanks
- BaconJuice 13y agovery cool, thanks for sharing
- zemaj 13y agoThat's very nifty, thanks! Subtle, yet gets the point across. Plenty of interesting ways that kind of bar could be included in a site.
- X4 13y agoYep, I've also seen that. But your markup is wrong. You should use <progress> instead I am using a kde widget called adjustable-clock which uses html5/css3/javascript and qml to render my system clock. Here's the source for the current clock I use, it uses a progressbar for the seconds: http://htmlpaste.com/7e957bb5523fa58f98b6657073c4a544942a13c3 http://htmlpaste.com/7e957bb5523fa58f98b6657073c4a544942a13c... QML: Clock.setRule('#hour', Clock.Hour); Clock.setRule('#minute', Clock.Minute); Clock.setRule('#second', 'value', Clock.Second, {'short': true});
- ynh 13y agoUse progress as html tag?
- mediumdeviation 13y agoIt's a HTML5 form element: http://developers.whatwg.org/the-button-element.html#the-progress-element http://developers.whatwg.org/the-button-element.html#the-pro.... It might be somewhat difficult to style, though.
- mistercow 13y agoSupport for the progress element is still missing from a lot of browsers, so I don't know if it's right to say that the markup is "wrong" for not using it
- thejosh 13y agoI really dislike the new loading bar in the YouTube site as videos continue to play while the next page is loaded. I'm on a fast connection so normally youtube loads instantly anyway, but this new method takes 4-10 seconds.
- dm2 13y agoeven worse is that there is no cached video while seeking. Even seeking to a "loaded" part of the youtube video results in the reloading the video from that point. Rewinding 10 seconds results in having to reload the video, wtf?
- paulfarino 13y agoI've been looking for this for a few weeks. Noticed on the Google Search iOS app. Thanks!
- druska 13y agoI like it. Just remember if you use this in production, save $("#progress") in a variable in the ajaxStart function to improve performance (this will call Sizzle one less time usually).
- pstadler 13y agoI did the same on https://www.mila.com https://www.mila.com It's fairly simple but it took some time to figure out the right sequence and timing for it to run smoothly across all devices / browsers.