forked from twbs/bootstrap
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add docs regarding .progress, inline style attrs, and CSP; closes twb…
…s#17785 [skip sauce]
- Loading branch information
1 parent
7690d94
commit 27725d6
Showing
1 changed file
with
214 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,214 @@ | ||
| <div class="bs-docs-section"> | ||
| <h1 id="progress" class="page-header">Progress bars</h1> | ||
|
|
||
| <p class="lead">Provide up-to-date feedback on the progress of a workflow or action with simple yet flexible progress bars.</p> | ||
|
|
||
| <div class="bs-callout bs-callout-danger" id="callout-progress-animation-css3"> | ||
| <h4>Cross-browser compatibility</h4> | ||
| <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> | ||
| </div> | ||
|
|
||
| <div class="bs-callout bs-callout-info"> | ||
| <h4 id="callout-progress-csp">Content Security Policy (CSP) compatibility</h4> | ||
| <p>If your website has a <a href="https://developer.mozilla.org/en-US/docs/Web/Security/CSP">Content Security Policy (CSP)</a> which doesn't allow <code>style-src 'unsafe-inline'</code>, then you won't be able to use inline <code>style</code> attributes to set progress bar widths as shown in our examples below. Alternative methods for setting the widths that are compatible with strict CSPs include using a little custom JavaScript (that sets <code>element.style.width</code>) or using custom CSS classes.</p> | ||
| </div> | ||
|
|
||
| <h2 id="progress-basic">Basic example</h2> | ||
| <p>Default progress bar.</p> | ||
| <div class="bs-example" data-example-id="simple-progress-bar"> | ||
| <div class="progress"> | ||
| <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> | ||
| <span class="sr-only">60% Complete</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% highlight html %} | ||
| <div class="progress"> | ||
| <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> | ||
| <span class="sr-only">60% Complete</span> | ||
| </div> | ||
| </div> | ||
| {% endhighlight %} | ||
|
|
||
| <h2 id="progress-label">With label</h2> | ||
| <p>Remove the <code><span></code> with <code>.sr-only</code> class from within the progress bar to show a visible percentage.</p> | ||
| <div class="bs-example" data-example-id="progress-bar-with-label"> | ||
| <div class="progress"> | ||
| <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> | ||
| 60% | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% highlight html %} | ||
| <div class="progress"> | ||
| <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"> | ||
| 60% | ||
| </div> | ||
| </div> | ||
| {% endhighlight %} | ||
| <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> | ||
| <div class="bs-example" data-example-id="progress-bar-at-low-percentage"> | ||
| <div class="progress"> | ||
| <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> | ||
| 0% | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;"> | ||
| 2% | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% highlight html %} | ||
| <div class="progress"> | ||
| <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;"> | ||
| 0% | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;"> | ||
| 2% | ||
| </div> | ||
| </div> | ||
| {% endhighlight %} | ||
|
|
||
|
|
||
| <h2 id="progress-alternatives">Contextual alternatives</h2> | ||
| <p>Progress bars use some of the same button and alert classes for consistent styles.</p> | ||
| <div class="bs-example" data-example-id="contextual-progress-bar"> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> | ||
| <span class="sr-only">40% Complete (success)</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> | ||
| <span class="sr-only">20% Complete</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> | ||
| <span class="sr-only">60% Complete (warning)</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> | ||
| <span class="sr-only">80% Complete (danger)</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% highlight html %} | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> | ||
| <span class="sr-only">40% Complete (success)</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> | ||
| <span class="sr-only">20% Complete</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> | ||
| <span class="sr-only">60% Complete (warning)</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> | ||
| <span class="sr-only">80% Complete (danger)</span> | ||
| </div> | ||
| </div> | ||
| {% endhighlight %} | ||
|
|
||
| <h2 id="progress-striped">Striped</h2> | ||
| <p>Uses a gradient to create a striped effect. Not available in IE9 and below.</p> | ||
| <div class="bs-example" data-example-id="striped-progress-bar"> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> | ||
| <span class="sr-only">40% Complete (success)</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> | ||
| <span class="sr-only">20% Complete</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> | ||
| <span class="sr-only">60% Complete (warning)</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> | ||
| <span class="sr-only">80% Complete (danger)</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% highlight html %} | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> | ||
| <span class="sr-only">40% Complete (success)</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> | ||
| <span class="sr-only">20% Complete</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> | ||
| <span class="sr-only">60% Complete (warning)</span> | ||
| </div> | ||
| </div> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> | ||
| <span class="sr-only">80% Complete (danger)</span> | ||
| </div> | ||
| </div> | ||
| {% endhighlight %} | ||
|
|
||
| <h2 id="progress-animated">Animated</h2> | ||
| <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> | ||
| <div class="bs-example" data-example-id="animated-progress-bar"> | ||
| <div class="progress"> | ||
| <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> | ||
| </div> | ||
| <button type="button" class="btn btn-default bs-docs-activate-animated-progressbar" data-toggle="button" aria-pressed="false" autocomplete="off">Toggle animation</button> | ||
| </div> | ||
| {% highlight html %} | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%"> | ||
| <span class="sr-only">45% Complete</span> | ||
| </div> | ||
| </div> | ||
| {% endhighlight %} | ||
|
|
||
| <h2 id="progress-stacked">Stacked</h2> | ||
| <p>Place multiple bars into the same <code>.progress</code> to stack them.</p> | ||
| <div class="bs-example" data-example-id="stacked-progress-bar"> | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-success" style="width: 35%"> | ||
| <span class="sr-only">35% Complete (success)</span> | ||
| </div> | ||
| <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> | ||
| <span class="sr-only">20% Complete (warning)</span> | ||
| </div> | ||
| <div class="progress-bar progress-bar-danger" style="width: 10%"> | ||
| <span class="sr-only">10% Complete (danger)</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {% highlight html %} | ||
| <div class="progress"> | ||
| <div class="progress-bar progress-bar-success" style="width: 35%"> | ||
| <span class="sr-only">35% Complete (success)</span> | ||
| </div> | ||
| <div class="progress-bar progress-bar-warning progress-bar-striped" style="width: 20%"> | ||
| <span class="sr-only">20% Complete (warning)</span> | ||
| </div> | ||
| <div class="progress-bar progress-bar-danger" style="width: 10%"> | ||
| <span class="sr-only">10% Complete (danger)</span> | ||
| </div> | ||
| </div> | ||
| {% endhighlight %} | ||
| </div> |