github.com/kayoticsully/syncthing@v0.8.9-0.20140724133906-c45a2fdc03f8/assets/bootstrap-3.1.1/less/progress-bars.less (about)

     1  //
     2  // Progress bars
     3  // --------------------------------------------------
     4  
     5  
     6  // Bar 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  // Spec and IE10+
    16  @keyframes progress-bar-stripes {
    17    from  { background-position: 40px 0; }
    18    to    { background-position: 0 0; }
    19  }
    20  
    21  
    22  
    23  // Bar itself
    24  // -------------------------
    25  
    26  // Outer container
    27  .progress {
    28    overflow: hidden;
    29    height: @line-height-computed;
    30    margin-bottom: @line-height-computed;
    31    background-color: @progress-bg;
    32    border-radius: @border-radius-base;
    33    .box-shadow(inset 0 1px 2px rgba(0,0,0,.1));
    34  }
    35  
    36  // Bar of progress
    37  .progress-bar {
    38    float: left;
    39    width: 0%;
    40    height: 100%;
    41    font-size: @font-size-small;
    42    line-height: @line-height-computed;
    43    color: @progress-bar-color;
    44    text-align: center;
    45    background-color: @progress-bar-bg;
    46    .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
    47    .transition(width .6s ease);
    48  }
    49  
    50  // Striped bars
    51  .progress-striped .progress-bar {
    52    #gradient > .striped();
    53    background-size: 40px 40px;
    54  }
    55  
    56  // Call animation for the active one
    57  .progress.active .progress-bar {
    58    .animation(progress-bar-stripes 2s linear infinite);
    59  }
    60  
    61  
    62  
    63  // Variations
    64  // -------------------------
    65  
    66  .progress-bar-success {
    67    .progress-bar-variant(@progress-bar-success-bg);
    68  }
    69  
    70  .progress-bar-info {
    71    .progress-bar-variant(@progress-bar-info-bg);
    72  }
    73  
    74  .progress-bar-warning {
    75    .progress-bar-variant(@progress-bar-warning-bg);
    76  }
    77  
    78  .progress-bar-danger {
    79    .progress-bar-variant(@progress-bar-danger-bg);
    80  }