Create a CSS progress bar

Aug 22, 2012

Table of contents:

Set up your page
Style the div
Style the ul and the li
Pseudo :before
The full code

An important element of interface design is communicating where in the process the user currently is. By showing the user what they have already completed, and what is left to do, you make your process a lot clearer. This can be critical in a sign up form or an Ecommerce checkout process where optimising the conversion rate will be critical to your success.

In a lot of web applications or websites, progress bars are created using images. This isn’t a very accessible method for creating a critical user interface feature. Instead of using images, you should be using an HTML element that can then be styled to create the look and feel you want. This means that the element will remain accessible, even without images or style.

Here is a tutorial for creating progress bars in HTML and CSS.

Set up your page

For this tutorial I’ll be writing all the HTML and CSS in one file to keep things simple. So the first thing we need to do is to create a simple page.

<html lang="en">
  <meta charset="utf-8" />
  <title>Progress tracker tutorial</title>
  <style>
    body {
      background-color: #000;
    }
  </style>

  <div id="stages">
    <ul>
      <li>First</li>
      <li>Second</li>
      <li class="active">Third</li>
      <li>Finished</li>
    </ul>
  </div>
</html>

Style the div

The next thing we will do is to style the div. As you can see, I’m using a CSS Gradient. To make your own CSS Gradients, take a look at The Ultimate CSS Gradient Generator. Hopefully all of this CSS should be pretty self explanatory, there’s nothing really special here.

#stages {
  width: 560px;
  height: 165px;
  margin: auto;
  margin-top: 100px;
  padding-top: 165px;
  background-color: #fff;
  font-family: verdana, "sans-serif";
  font-size: 9px;
  background: #5730a5; /* Old browsers */
  background: -moz-linear-gradient(top, #5730a5 0%, #6b21a8 100%); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #5730a5),
    color-stop(100%, #6b21a8)
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    #5730a5 0%,
    #6b21a8 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(
    top,
    #5730a5 0%,
    #6b21a8 100%
  ); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #5730a5 0%, #6b21a8 100%); /* IE10+ */
  background: linear-gradient(to bottom, #5730a5 0%, #6b21a8 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5730a5′, endColorstr='#6b21a8′,GradientType=0 ); /* IE6-9 */
}

Style the ul and the li

Next we need to style the ul and li. Again, there’s nothing here to really explain. Notice how I set list-style to none.

#stages ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
#stages li {
  float: left;
  width: 25%;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
}

Pseudo :before

The final bit is the most important part. In order to place our own symbol as the list point we use the :before pseudo-element. This allows us to place something before each li tag.

In this example I’m simply using the diamond HTML entity.

#stages ul > li:before {
  content: "♦";
  font-size: 25px;
  line-height: 1px;
  display: block;
  color: #ededed;
  background-color: #262626;
  border-top: 1px solid #ededed;
  margin: 0 0 15px 0;
}

And finally, I’ll add an active class to differentiate the active stage in the process.

#stages ul > li.active:before {
  color: #4ee54e;
  text-shadow: 0px 0px 10px #56ff5f;
}

And there you have it, an easy and simple progress tracker that you can use in your form design to make your User Experience much better.

The full code

Here is the full code.

<html lang="en">
  <meta charset="utf-8" />
  <title>Stage tracker tutorial</title>
  <style>
    body {
      background-color: #000;
    }
    #stages {
      width: 560px;
      height: 165px;
      margin: auto;
      margin-top: 100px;
      padding-top: 165px;
      background-color: #fff;
      font-family: verdana, "sans-serif";
      font-size: 9px;
      background: #5730a5; /* Old browsers */
      background: -moz-linear-gradient(
        top,
        #5730a5 0%,
        #6b21a8 100%
      ); /* FF3.6+ */
      background: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(0%, #5730a5),
        color-stop(100%, #6b21a8)
      ); /* Chrome,Safari4+ */
      background: -webkit-linear-gradient(
        top,
        #5730a5 0%,
        #6b21a8 100%
      ); /* Chrome10+,Safari5.1+ */
      background: -o-linear-gradient(
        top,
        #5730a5 0%,
        #6b21a8 100%
      ); /* Opera 11.10+ */
      background: -ms-linear-gradient(
        top,
        #5730a5 0%,
        #6b21a8 100%
      ); /* IE10+ */
      background: linear-gradient(
        to bottom,
        #5730a5 0%,
        #6b21a8 100%
      ); /* W3C */
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5730a5′, endColorstr='#6b21a8′,GradientType=0 ); /* IE6-9 */
    }
    #stages ul {
      list-style: none;
      padding: 0px;
      margin: 0px;
    }
    #stages li {
      float: left;
      width: 25%;
      text-align: center;
      text-transform: uppercase;
      color: #fff;
    }
    #stages ul > li:before {
      content: "♦";
      font-size: 25px;
      line-height: 1px;
      display: block;
      color: #ededed;
      background-color: #262626;
      border-top: 1px solid #ededed;
      margin: 0 0 15px 0;
    }
    #stages ul > li.active:before {
      color: #4ee54e;
      text-shadow: 0px 0px 10px #56ff5f;
    }
  </style>

  <div id="stages">
    <ul>
      <li>First</li>
      <li>Second</li>
      <li class="active">Third</li>
      <li>Finished</li>
    </ul>
  </div>
</html>