HN Explorer

12 comments

[ 5.2 ms ] story [ 33.4 ms ] thread
zemaj
That'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
Yep, 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/7e957bb5523fa58f98b6657073c4a544942a13c...

QML:

  Clock.setRule('#hour', Clock.Hour);
  Clock.setRule('#minute', Clock.Minute);
  Clock.setRule('#second', 'value', Clock.Second, {'short': true});
mistercow
Support 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
I 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
even 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?
ezraroi
Nicely done and handful. Thanks
paulfarino
I've been looking for this for a few weeks. Noticed on the Google Search iOS app. Thanks!
druska
I 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
I did the same on 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.