[Summary view] [Print] [Text view]

   1  //
   2  // Progress bars
   3  // --------------------------------------------------
   4  
   5  
   6  // ANIMATIONS
   7  // ----------
   8  
   9  // Webkit
  10  @-webkit-keyframes progress-bar-stripes {
  11    from  { background-position: 40px 0; }
  12    to    { background-position: 0 0; }
  13  }
  14  
  15  // Firefox
  16  @-moz-keyframes progress-bar-stripes {
  17    from  { background-position: 40px 0; }
  18    to    { background-position: 0 0; }
  19  }
  20  
  21  // IE9
  22  @-ms-keyframes progress-bar-stripes {
  23    from  { background-position: 40px 0; }
  24    to    { background-position: 0 0; }
  25  }
  26  
  27  // Opera
  28  @-o-keyframes progress-bar-stripes {
  29    from  { background-position: 0 0; }
  30    to    { background-position: 40px 0; }
  31  }
  32  
  33  // Spec
  34  @keyframes progress-bar-stripes {
  35    from  { background-position: 40px 0; }
  36    to    { background-position: 0 0; }
  37  }
  38  
  39  
  40  
  41  // THE BARS
  42  // --------
  43  
  44  // Outer container
  45  .progress {
  46    overflow: hidden;
  47    height: @baseLineHeight;
  48    margin-bottom: @baseLineHeight;
  49    #gradient > .vertical(#f5f5f5, #f9f9f9);
  50    .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
  51    .border-radius(@baseBorderRadius);
  52  }
  53  
  54  // Bar of progress
  55  .progress .bar {
  56    width: 0%;
  57    height: 100%;
  58    color: @white;
  59    float: left;
  60    font-size: 12px;
  61    text-align: center;
  62    text-shadow: 0 -1px 0 rgba(0,0,0,.25);
  63    #gradient > .vertical(#149bdf, #0480be);
  64    .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
  65    .box-sizing(border-box);
  66    .transition(width .6s ease);
  67  }
  68  .progress .bar + .bar {
  69    .box-shadow(~"inset 1px 0 0 rgba(0,0,0,.15), inset 0 -1px 0 rgba(0,0,0,.15)");
  70  }
  71  
  72  // Striped bars
  73  .progress-striped .bar {
  74    #gradient > .striped(#149bdf);
  75    .background-size(40px 40px);
  76  }
  77  
  78  // Call animation for the active one
  79  .progress.active .bar {
  80    -webkit-animation: progress-bar-stripes 2s linear infinite;
  81       -moz-animation: progress-bar-stripes 2s linear infinite;
  82        -ms-animation: progress-bar-stripes 2s linear infinite;
  83         -o-animation: progress-bar-stripes 2s linear infinite;
  84            animation: progress-bar-stripes 2s linear infinite;
  85  }
  86  
  87  
  88  
  89  // COLORS
  90  // ------
  91  
  92  // Danger (red)
  93  .progress-danger .bar, .progress .bar-danger {
  94    #gradient > .vertical(#ee5f5b, #c43c35);
  95  }
  96  .progress-danger.progress-striped .bar, .progress-striped .bar-danger {
  97    #gradient > .striped(#ee5f5b);
  98  }
  99  
 100  // Success (green)
 101  .progress-success .bar, .progress .bar-success {
 102    #gradient > .vertical(#62c462, #57a957);
 103  }
 104  .progress-success.progress-striped .bar, .progress-striped .bar-success {
 105    #gradient > .striped(#62c462);
 106  }
 107  
 108  // Info (teal)
 109  .progress-info .bar, .progress .bar-info {
 110    #gradient > .vertical(#5bc0de, #339bb9);
 111  }
 112  .progress-info.progress-striped .bar, .progress-striped .bar-info {
 113    #gradient > .striped(#5bc0de);
 114  }
 115  
 116  // Warning (orange)
 117  .progress-warning .bar, .progress .bar-warning {
 118    #gradient > .vertical(lighten(@orange, 15%), @orange);
 119  }
 120  .progress-warning.progress-striped .bar, .progress-striped .bar-warning {
 121    #gradient > .striped(lighten(@orange, 15%));
 122  }