Design, CG Graphics & Inspiration
How to Create Progress Bar with CSS3

How to Create Progress Bar with CSS3

Today we will recreate a progress-bar from the Adobe® Flash® Player settings program with the help of CSS3, using gradients and shadows.

First we will create the simple marking:

<div class="bar_wrap">
    <div class="bar" style="width:76%"></div>
</div>
<div class="captions">
    <div class="left">2324k / 3019k</div>
    <div class="right">76%</div>
</div>

Now we will write styles:

body {
  background: #4D4D4D;
}
.bar_wrap {
  border: 1px solid #1C1C1C;
  background-color: #313131;
  -webkit-box-shadow: 0 0 1px #666, inset 0 1px 1px #222;
  -moz-box-shadow: 0 0 1px #666, inset 0 1px 1px #222;
  -o-box-shadow: 0 0 1px #666, inset 0 1px 1px #222;
  box-shadow: 0 0 1px #666, inset 0 1px 1px #222;
  background-image: -webkit-linear-gradient(#323232, #2E2E2E 50%, #323232);
  background-image: -moz-linear-gradient(#323232, #2E2E2E 50%, #323232);
  background-image: -o-linear-gradient(#323232, #2E2E2E 50%, #323232);
}
.bar {
  
}
.captions {
  color: #FDFDFD;
  padding: 5px 2px 0;
  font: 11px/14px sans-serif;
  text-shadow: 0 1px 0 #000;
}
.left {
  float: left;
}
.right {
  float: right;
}

As a result we will get:

Yes, it’s not the screenshot, which is at the beginning of the article, it is the result represented in Firefox 7!
It is also tested in Safari 5.1, Opera 11.52 and Chrome 15.
It also looks good in old browsers.

Here you can see the working example.

You might also be interested in..

Making an Image Gallery with CSS3
How to Achieve Text Fading Effect in CSS3
SITH – CSS3 Technique for Soft Image Transition
New High Quality HTML5/CSS3 Templates and Themes
50 Useful CSS3 Tutorials
Useful HTML5/CSS3 Snippets For Web Developers
Sprite animation in CSS3
CSS3 Now! Transitions
Sprite animation in CSS3
CSS3 Now! Transitions
Creating HTML5/CSS3 Forms: 30 Helpful Tutorials
Creating CSS3 Navigation Menus: Fresh Tutorials, Techniques and Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools
Creating CSS3 Buttons: Techniques, Tutorials, Tools

  • Denis Bobrovnikov,
  • November 12, 2011

SHARE THIS POST

Subscribe for the hottest posts

Subscribe to our email newsletter for useful tips and freebies.

  • http://www.logoblog.org Logo Design

    This is really nice posting! i am learning web designing, so this would gonna more useful to me! thanks for the sharing :)

  • sunflowamedia

    Great Work~

  • http://www.logoguru.co.uk/pages/logo-design-contest.html Logo Design Contest

     Best tutorial with bit of detailed and full of coding addition. Many Thanks

Google Plus

Follow Me on Pinterest
  • Unusual Geometry in Web Design

    Pinned: 8 Jul 2012
  • David Lynch Films: Collection of Artworks

    Pinned: 7 Jul 2012
  • Web Design Inspirational Cocktail

    Pinned: 7 Jul 2012
  • 45 New jQuery Plugins for Web Developers

    Pinned: 5 Jul 2012
  • Showcase of Beautiful Underwater Photography

    Pinned: 4 Jul 2012
  • Film Illustrations by Rhys James

    Pinned: 3 Jul 2012
  • A Showcase of Art Deco Design Inspiration

    Pinned: 3 Jul 2012
  • Giveaway: Win $300 for PSD to HTML Services from XHTMLGenius

    Pinned: 2 Jul 2012
  • Amazing Collection of Tilt-Shift Photography and Video

    Pinned: 1 Jul 2012
  • 40 Creative Examples of Business Cards

    Pinned: 1 Jul 2012