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

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!