TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Automatically Add Loading Bars to Your Website

122 pointsby afschwartzover 11 years ago

18 comments

darklajidover 11 years ago
I like the presentation and I understand the reason why people would want to use this thing.<p>That said: Please.. Show static content first. Don&#x27;t do the Blogger thing. That looks<p>- ridiculous<p>- stupid<p>- like Geocities did<p>In other words: For &#x27;apps&#x27;, games etc. this looks really neat. But a website, say a blog..., shouldn&#x27;t need to show a progress indicator before any content shows up.
评论 #6419544 未加载
评论 #6419648 未加载
评论 #6420334 未加载
评论 #6419532 未加载
评论 #6420298 未加载
geuisover 11 years ago
No, please, stop, don&#x27;t do this.<p>This is a terrible UI experience. Note: I have been living and working with iOS 7 since the first beta. I know it&#x27;s new and shiny to everyone else, but this is absolutely the worst thing to add to your site. It serves no functional purpose and just clashes with devices that do this natively.
评论 #6420042 未加载
评论 #6420982 未加载
评论 #6420519 未加载
评论 #6421437 未加载
at-fates-handsover 11 years ago
Or you could just speed your site up so you don&#x27;t need to show someone a progress bar.<p>Or use Angular or Backbone and then you really don&#x27;t need a progress bar.
评论 #6420588 未加载
评论 #6419720 未加载
评论 #6421922 未加载
评论 #6420198 未加载
评论 #6422740 未加载
marknadalover 11 years ago
This is fantastic, and surprisingly worked perfectly with my own super complicated browser-side AMD style module loader. I&#x27;m very impressed that it &quot;just works&quot; and seems like magic. Thank you so much for making this! (seems like everybody else is complaining, HNers are so ungrateful)
评论 #6419868 未加载
logicalleeover 11 years ago
Good God, why would I ever want to see Loading Bars on a website.<p>If you can&#x27;t front-load enough to give 100 bytes of text to read, don&#x27;t bother answering my http request.
mabboover 11 years ago
A team related to mine released a new UI for their software. It included a loading bar, of sorts, while it was loading a new page on the tool.<p>Users complained it was too slow. They removed the loading bar. Users stopped complaining it was slow.<p>I&#x27;ve since stopped trying to find new ways to add loading bars, and just focused on making my software faster.
评论 #6419817 未加载
评论 #6420832 未加载
Smudgeover 11 years ago
It looks very pretty, but sadly my Macbook Air couldn&#x27;t quite keep up with everything happening on the page. My ability to even scroll kind of stuttered to a stop.<p>Not sure why a loading bar needs to be so resource-intensive.<p>(Granted, I&#x27;m plugged into a high resolution display, but even so most sites I visit don&#x27;t have issues like this.)
评论 #6420640 未加载
评论 #6420340 未加载
mannixover 11 years ago
Here&#x27;s my take: this is very valuable on sites that dynamically load new pages without an actual browser navigation (read: pjax).<p>It is not useful (and indeed it is an anti-pattern) for static sites in which case you&#x27;d want to just use the browser loading mechanism, that the user (hopefully) understands and is used to.
评论 #6420330 未加载
jaytaylorover 11 years ago
This is just like NProgress except even better and easier to use - thank you for sharing this!<p>The only caveat I encountered with this was that I had to update the z-index in the generated css file to &quot;999999&quot; for it to work with bootstrap. Notable, NProgress has the same incompatibility with bootstrap.
paultannenbaumover 11 years ago
Strange enough, codrops recently published an article with very similar effects and styling: <a href="http://tympanus.net/codrops/2013/09/18/creative-loading-effects/" rel="nofollow">http:&#x2F;&#x2F;tympanus.net&#x2F;codrops&#x2F;2013&#x2F;09&#x2F;18&#x2F;creative-loading-effe...</a><p>I see the article was published on the 18th, and hubspot created the repo on the 11th, so I wonder if this was just a coincidence. Either way, nice work
评论 #6419815 未加载
评论 #6419848 未加载
zebraover 11 years ago
Not bad - 8kb, drop-in installation, 9 designs for progress bar included.
hademover 11 years ago
Those interested might also be interested in a previous discussion on a similar progress bar.<p><a href="https://news.ycombinator.com/item?id=6246183" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=6246183</a>
评论 #6419838 未加载
rodedwardsover 11 years ago
Looks great - works great! Thank-you!<p>Notes... To get it over the bootstrap navbar I z-indexed to a million. The ajax calls on my site seem to happen too fast to invoke. Fast pageloads are the benefit of no traffic!
gbaygonover 11 years ago
It doesn&#x27;t seem to work with Firefox 25 + Ghostery, I don&#x27;t see a loading bar and all the examples are empty white boxes. Disabling Ghostery it works properly.
评论 #6419885 未加载
publicfigover 11 years ago
I&#x27;m actually very curious on how they build in the color picker into the site to designate the site&#x27;s colors. Anyone have any knowledge on this?
评论 #6420165 未加载
OriginalATover 11 years ago
Looks great. I am building an image intensive app currently and will definitely be putting this to use. Thanks for sharing!
评论 #6419827 未加载
Elhanaover 11 years ago
Ghostery blocks it.
zeckalphaover 11 years ago
&gt; Mac OSX<p>It&#x27;s Mac OS X. Plus you shouldn&#x27;t name it that. Call it Wave or something else.