Excellent Support. By using our themes, you also use our excellent support! Our expert staff is here for you.

Create easy Progress Bars

Mick in Tutorials
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.

Website: https://www.idesignsmf.com/



Connect with us:

Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.


In this section you will find in-depth how-to's involving common SMF development and design techniques.

go up