Contribute to the development of SMF. Follow the coding discussions taking place on >> Github.

Create easy Progress Bars

Mick in Tutorials on May 06, 2013

Progress bars can be used for project status, donation status, etc. They use no images, just CSS3 fancies. We can use these on a article page or a simple html side block. Let's create a very simple progress bars with css3.

Demo: Progress Bars

[admin]Credit: Twitter Bootstrap[/admin]

The markup:

<div class="progress progress-info">
    <div class="bar" style="width: 20%"></div>
<div class="progress progress-success">
    <div class="bar" style="width: 40%"></div>
<div class="progress progress-warning">
    <div class="bar" style="width: 60%"></div>
<div class="progress progress-danger">
    <div class="bar" style="width: 80%"></div>

The CSS:

.progress {
  height: 20px;
  margin-bottom: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  background-color: #f7f7f7;
  background-repeat: repeat-x;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
.progress .bar {
  float: left;
  width: 0px;
  height: 100%;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.25);
  background-color: #0e90d2;
  background-repeat: repeat-x;
  box-shadow: 0px -1px 0px rgba(0, 0, 0, 0.15) inset;
.progress-info .bar, .progress .bar-info {
  background-color: #4bb1cf;
  background-repeat: repeat-x;
.progress-success .bar, .progress .bar-success {
  background-color: #5eb95e;
  background-repeat: repeat-x;
.progress-warning .bar, .progress .bar-warning {
  background-color: #faa732;
  background-repeat: repeat-x;
.progress-danger .bar, .progress .bar-danger {
  background-color: #dd514c;
  background-repeat: repeat-x;

Tagged with: progress bar css css3 smf block 


Mick G


Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Tacos and Pizza.


Latest Discussions

Join the conversation

Our Most Popular Features