Progress bar with CSS and HTML5 in a few lines of code

html5-css-progress-bar-mini

Level: intermediate

A progress bar in CSS for web project? Sure, and it without using images. Today short and to the point.

Create progress bar with CSS and HTML5

We can use HTML5 and Bootstrap, or define our own CSS styles.

Solution #1 – HTML5

Let’s add Twitter Bootstrap and jQuery to our web page, and a simple code as below.

...
  <div class="progress" style="width: 50%">
    <div class="progress-bar" role="progressbar" aria-valuenow="40"
      aria-valuemin="0" aria-valuemax="100" style="width: 40%">
      40% (default style)
    </div>
  </div>

Ready! We have a progress bar. The colors and progress step we define through CSS classes (e.g.: class=”progress-bar progress-bar-danger”) and properties (e.g.: role=”progressbar”, aria-valuenow=”100″). And besides, we set style width of an element.

More examples of progress bars below.

...  
  <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar"
      aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%">
      Success
    </div>
  </div>
  
  <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" 
      aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
      Info
    </div>
  </div>

  <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" 
      aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
      Warning
    </div>
  </div>
  
  <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100"
      aria-valuemin="0" aria-valuemax="100" style="width: 100%">
      Danger
    </div>
  </div>

Simply and effectively. Sample progress bars:

Progress bars with Bootstrap

Progress bars with Bootstrap

OK, but maybe we would like to create our own progress bar with CSS. No problem!

Solution #2 – CSS

Assuming we don’t want to use Bootstrap, and we want to have more control easier, we can use a pretty simple CSS trick.

  #my-progress-bar {
    background: #ccc;
    border-radius: 12px;
    height: 22px;
    width: 330px;
    padding: 0px;
    margin: 0 auto;
  }
   
  #my-progress-bar:after {
    content: '';
    display: block;
    background: #0c0;
    width: 50%;
    height: 100%;
    border-radius: 9px;
  }

Now just show our progress bar:

<div id="my-progress-bar"></div>

Demo:

Progress bars with CSS


Resources:

ProBars – jQuery animated progress bars plugin

Slim progress bar jQuery plugin – NProgress

Progress bar with CSS – summary

As we can see, HTML5, Bootstrap and CSS brings us enough to create progress bars for the web. Simply and without using images.

Thank you and have fun!

Web and Mobile Software Developer, with years of experience. My biggest passions are programming, new technologies, e-commerce, as well sports, cars, and of course my family.

Facebook Twitter LinkedIn Google+ Skype Xing 

Share: Share on Facebook2Tweet about this on TwitterShare on Google+1Share on LinkedIn1Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
You can leave a response, or trackback from your own site.