31 FREE Progress and Loading Bars PSD Design

Written by Kevin Liew on 12 Oct 2011
159,977 Views • Web Design


Our 7th series of Free PSD layout around the web! Loading bar is serve as preloader to indicate how long the users have to wait. This interface element isn't a common web element in HTML and CSS web design, it's more common in flash website development as it needs to load all the assets.

With HTML and CSS websites, we can use it for:

  • Indicate file upload progress
  • A preloader (Yes, it's possible)
  • As a status indicator. Eg, total of donation/money accumulated

In case you've missed our previous series in PSD layout, you can visit them via the following links. We still have 2-3 series to go, I hope you will enjoy this post and stay tuned for more!

Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

Babache04 13 years ago
Nice for this job, but, how can I use it in a website ?
Mikkael 12 years ago
First you place the background PSD.

And then you slice the frontend bar into tiny slices (it all depends on your design/pattern, e.g. 3-10px wide per percent) and change the code so, that it extends the bar (so the graphic) to 100%.

Example: Let's say, 100% = 300px, so extend the 3px graphic (1%) to 300px (100%)

kanniak 12 years ago
I have tried to do it with javascript but failed. Can you upload an example/tutorial of how to do it?
Karf 12 years ago
This one doesn't use images it's much easier to implement and looks pretty nice. Check the live Demo: http://ruwix.com/simple-javascript-html-css-slider-progress-bar/
Becker 11 years ago
Chink Chonk 10 years ago
Chinky Shit.