ashleshajs/ashlesha/public/static/bootstrap/less/progress-bars.less

AshleshaJS is a framework to build high performance and maintainable single page web applications. It uses ExpressJS and YUI3 as foundation. It is tightly coupled with Twitter Bootstrap for the CSS framework but you can use any other framework as well.

// PROGRESS BARS
// -------------


// ANIMATIONS
// ----------

// Webkit
@-webkit-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// Firefox
@-moz-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// IE9
@-ms-keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}

// Opera
@-o-keyframes progress-bar-stripes {
  from  { background-position: 0 0; }
  to    { background-position: 40px 0; }
}

// Spec
@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}



// THE BARS
// --------

// Outer container
.progress {
  overflow: hidden;
  height: 18px;
  margin-bottom: 18px;
  #gradient > .vertical(#f5f5f5, #f9f9f9);
  .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  .border-radius(4px);
}

// Bar of progress
.progress .bar {
  width: 0%;
  height: 18px;
  color: @white;
  font-size: 12px;
  text-align: center;
  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  #gradient > .vertical(#149bdf, #0480be);
  .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  .box-sizing(border-box);
  .transition(width .6s ease);
}

// Striped bars
.progress-striped .bar {
  #gradient > .striped(#149bdf);
  .background-size(40px 40px);
}

// Call animation for the active one
.progress.active .bar {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
     -moz-animation: progress-bar-stripes 2s linear infinite;
      -ms-animation: progress-bar-stripes 2s linear infinite;
       -o-animation: progress-bar-stripes 2s linear infinite;
          animation: progress-bar-stripes 2s linear infinite;
}



// COLORS
// ------

// Danger (red)
.progress-danger .bar {
  #gradient > .vertical(#ee5f5b, #c43c35);
}
.progress-danger.progress-striped .bar {
  #gradient > .striped(#ee5f5b);
}

// Success (green)
.progress-success .bar {
  #gradient > .vertical(#62c462, #57a957);
}
.progress-success.progress-striped .bar {
  #gradient > .striped(#62c462);
}

// Info (teal)
.progress-info .bar {
  #gradient > .vertical(#5bc0de, #339bb9);
}
.progress-info.progress-striped .bar {
  #gradient > .striped(#5bc0de);
}

// Warning (orange)
.progress-warning .bar {
  #gradient > .vertical(lighten(@orange, 15%), @orange);
}
.progress-warning.progress-striped .bar {
  #gradient > .striped(lighten(@orange, 15%));
}