POLICY-SDK-APP/src/main/webapp/app/policyApp/CSS/bootstrap/docs/_includes/components/progress-bars.html

   1 <div class="bs-docs-section">
   2   <h1 id="progress" class="page-header">Progress bars</h1>
   3
   4   <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p>
   5
   6   <div class="bs-callout bs-callout-danger" id="callout-progress-animation-css3">
   7     <h4>Cross-browser compatibility</h4>
   8     <p>Progress bars use CSS3 transitions and animations to achieve some of their effects. These features are not supported in Internet Explorer 9 and below or older versions of Firefox. Opera 12 does not support animations.</p>
   9   </div>
  10
  11   <h2 id="progress-basic">Basic example</h2>
  12   <p>Default progress bar.</p>
  13   <div class="bs-example" data-example-id="simple-progress-bar">
  14     <div class="progress">
  15       <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  16         <span class="sr-only">60% Complete</span>
  17       </div>
  18     </div>
  19   </div>
  20 {% highlight html %}
  21 <div class="progress">
  22   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  23     <span class="sr-only">60% Complete</span>
  24   </div>
  25 </div>
  26 {% endhighlight %}
  27
  28   <h2 id="progress-label">With label</h2>
  29   <p>Remove the <code>&lt;span&gt;</code> with <code>.sr-only</code> class from within the progress bar to show a visible percentage.</p>
  30   <div class="bs-example" data-example-id="progress-bar-with-label">
  31     <div class="progress">
  32       <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  33         60%
  34       </div>
  35     </div>
  36   </div>
  37 {% highlight html %}
  38 <div class="progress">
  39   <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
  40     60%
  41   </div>
  42 </div>
  43 {% endhighlight %}
  44   <p>To ensure that the label text remains legible even for low percentages, consider adding a <code>min-width</code> to the progress bar.</p>
  45   <div class="bs-example" data-example-id="progress-bar-at-low-percentage">
  46     <div class="progress">
  47       <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
  48         0%
  49       </div>
  50     </div>
  51     <div class="progress">
  52       <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
  53         2%
  54       </div>
  55     </div>
  56   </div>
  57 {% highlight html %}
  58 <div class="progress">
  59   <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
  60     0%
  61   </div>
  62 </div>
  63 <div class="progress">
  64   <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
  65     2%
  66   </div>
  67 </div>
  68 {% endhighlight %}
  69
  70
  71   <h2 id="progress-alternatives">Contextual alternatives</h2>
  72   <p>Progress bars use some of the same button and alert classes for consistent styles.</p>
  73   <div class="bs-example" data-example-id="contextual-progress-bar">
  74     <div class="progress">
  75       <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
  76         <span class="sr-only">40% Complete (success)</span>
  77       </div>
  78     </div>
  79     <div class="progress">
  80       <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
  81         <span class="sr-only">20% Complete</span>
  82       </div>
  83     </div>
  84     <div class="progress">
  85       <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
  86         <span class="sr-only">60% Complete (warning)</span>
  87       </div>
  88     </div>
  89     <div class="progress">
  90       <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
  91         <span class="sr-only">80% Complete (danger)</span>
  92       </div>
  93     </div>
  94   </div>
  95 {% highlight html %}
  96 <div class="progress">
  97   <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
  98     <span class="sr-only">40% Complete (success)</span>
  99   </div>
 100 </div>
 101 <div class="progress">
 102   <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
 103     <span class="sr-only">20% Complete</span>
 104   </div>
 105 </div>
 106 <div class="progress">
 107   <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
 108     <span class="sr-only">60% Complete (warning)</span>
 109   </div>
 110 </div>
 111 <div class="progress">
 112   <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
 113     <span class="sr-only">80% Complete (danger)</span>
 114   </div>
 115 </div>
 116 {% endhighlight %}
 117
 118   <h2 id="progress-striped">Striped</h2>
 119   <p>Uses a gradient to create a striped effect. Not available in IE9 and below.</p>
 120   <div class="bs-example" data-example-id="striped-progress-bar">
 121     <div class="progress">
 122       <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
 123         <span class="sr-only">40% Complete (success)</span>
 124       </div>
 125     </div>
 126     <div class="progress">
 127       <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
 128         <span class="sr-only">20% Complete</span>
 129       </div>
 130     </div>
 131     <div class="progress">
 132       <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
 133         <span class="sr-only">60% Complete (warning)</span>
 134       </div>
 135     </div>
 136     <div class="progress">
 137       <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
 138         <span class="sr-only">80% Complete (danger)</span>
 139       </div>
 140     </div>
 141   </div>
 142 {% highlight html %}
 143 <div class="progress">
 144   <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
 145     <span class="sr-only">40% Complete (success)</span>
 146   </div>
 147 </div>
 148 <div class="progress">
 149   <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
 150     <span class="sr-only">20% Complete</span>
 151   </div>
 152 </div>
 153 <div class="progress">
 154   <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
 155     <span class="sr-only">60% Complete (warning)</span>
 156   </div>
 157 </div>
 158 <div class="progress">
 159   <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
 160     <span class="sr-only">80% Complete (danger)</span>
 161   </div>
 162 </div>
 163 {% endhighlight %}
 164
 165   <h2 id="progress-animated">Animated</h2>
 166   <p>Add <code>.active</code> to <code>.progress-bar-striped</code> to animate the stripes right to left. Not available in IE9 and below.</p>
 167   <div class="bs-example" data-example-id="animated-progress-bar">
 168     <div class="progress">
 169       <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"><span class="sr-only">45% Complete</span></div>
 170     </div>
 171     <button type="button" class="btn btn-default bs-docs-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">Toggle animation</button>
 172   </div>
 173 {% highlight html %}
 174 <div class="progress">
 175   <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
 176     <span class="sr-only">45% Complete</span>
 177   </div>
 178 </div>
 179 {% endhighlight %}
 180
 181   <h2 id="progress-stacked">Stacked</h2>
 182   <p>Place multiple bars into the same <code>.progress</code> to stack them.</p>
 183   <div class="bs-example" data-example-id="stacked-progress-bar">
 184     <div class="progress">
 185       <div class="progress-bar progress-bar-success" style="width: 35%">
 186         <span class="sr-only">35% Complete (success)</span>
 187       </div>
 188       <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
 189         <span class="sr-only">20% Complete (warning)</span>
 190       </div>
 191       <div class="progress-bar progress-bar-danger" style="width: 10%">
 192         <span class="sr-only">10% Complete (danger)</span>
 193       </div>
 194     </div>
 195   </div>
 196 {% highlight html %}
 197 <div class="progress">
 198   <div class="progress-bar progress-bar-success" style="width: 35%">
 199     <span class="sr-only">35% Complete (success)</span>
 200   </div>
 201   <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%">
 202     <span class="sr-only">20% Complete (warning)</span>
 203   </div>
 204   <div class="progress-bar progress-bar-danger" style="width: 10%">
 205     <span class="sr-only">10% Complete (danger)</span>
 206   </div>
 207 </div>
 208 {% endhighlight %}
 209 </div>