Web Design

31 FREE Progress and Loading Bars PSD Design

Written by Kevin Liew on 12 Oct 2011
99,820 Views • Shares
6 comments

Introduction

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.

6 comments
Babache04 5 years ago
Nice for this job, but, how can I use it in a website ?
Reply
Mikkael 4 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%)

Reply
kanniak 4 years ago
I have tried to do it with javascript but failed. Can you upload an example/tutorial of how to do it?
Reply
Karf 4 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/
Reply
Becker 3 years ago
Chink Chonk 2 years ago
Chinky Shit.
Reply