Create easy Progress Bars

in Tutorials on 06 May 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>
<div class="progress progress-success">
    <div class="bar" style="width: 40%"></div>
</div>
<div class="progress progress-warning">
    <div class="bar" style="width: 60%"></div>
</div>
<div class="progress progress-danger">
    <div class="bar" style="width: 80%"></div>
</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;
}



idesignSMF Team
Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF.com 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.

idesignSMF.com | SimpleMachines.org



0 Comments


rocket_launch

Professional & Impressive. We provide top quality free SMF themes with awesome support.