progress-bars.styl

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


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

// Spec
@keyframes progress-bar-stripes
  from
    background-position: 0 0
  to
    background-position: 40px 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(#62c462)
  background-size(40px 40px)


// Call animation for the active one
.progress.active .bar
  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)