diff options
Diffstat (limited to 'docs/components/progress.md')
| -rw-r--r-- | docs/components/progress.md | 28 |
1 files changed, 8 insertions, 20 deletions
diff --git a/docs/components/progress.md b/docs/components/progress.md index 5e0abc5fe..d137fad14 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -1,6 +1,7 @@ --- layout: docs title: Progress +description: Documentation and examples for using Bootstrap progress bars. group: components --- @@ -13,39 +14,26 @@ Stylize [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/doc ## Example -To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/components/utilities/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute. +To caption a progress bar, simply add a `<div>` with your caption text, [align the text using a utility class]({{ site.baseurl }}/utilities/typography/#text-alignment), and associate the caption with the `<progress>` element using the `aria-describedby` attribute. {% example html %} -<div class="text-xs-center" id="example-caption-1">Reticulating splines… 0%</div> +<div class="text-center" id="example-caption-1">Reticulating splines… 0%</div> <progress class="progress" value="0" max="100" aria-describedby="example-caption-1"></progress> -<div class="text-xs-center" id="example-caption-2">Reticulating splines… 25%</div> +<div class="text-center" id="example-caption-2">Reticulating splines… 25%</div> <progress class="progress" value="25" max="100" aria-describedby="example-caption-2"></progress> -<div class="text-xs-center" id="example-caption-3">Reticulating splines… 50%</div> +<div class="text-center" id="example-caption-3">Reticulating splines… 50%</div> <progress class="progress" value="50" max="100" aria-describedby="example-caption-3"></progress> -<div class="text-xs-center" id="example-caption-4">Reticulating splines… 75%</div> +<div class="text-center" id="example-caption-4">Reticulating splines… 75%</div> <progress class="progress" value="75" max="100" aria-describedby="example-caption-4"></progress> -<div class="text-xs-center" id="example-caption-5">Reticulating splines… 100%</div> +<div class="text-center" id="example-caption-5">Reticulating splines… 100%</div> <progress class="progress" value="100" max="100" aria-describedby="example-caption-5"></progress> {% endexample %} -## IE9 support - -Internet Explorer 9 doesn't support the HTML5 `<progress>` element, but we can work around that. - -{% example html %} -<div class="text-xs-center" id="example-caption-6">Reticulating splines… 25%</div> -<progress class="progress" value="25" max="100" aria-describedby="example-caption-6"> - <div class="progress"> - <span class="progress-bar" style="width: 25%;"></span> - </div> -</progress> -{% endexample %} - ## Contextual alternatives Progress bars use some of the same button and alert classes for consistent styles. @@ -73,7 +61,7 @@ Uses a gradient to create a striped effect. The striped gradient can also be animated. Add `.progress-animated` to `.progress` to animate the stripes right to left via CSS3 animations. -**Animated progress bars do not work in IE9 and Opera 12** – as they don't support CSS3 animations – **nor in IE10+ and Microsoft Edge** – as they currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx). +**Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations. They also **don't work in IE10+ and Microsoft Edge** as those browsers currently don't support CSS3 animations on the [`::-ms-fill` pseudo-element](https://msdn.microsoft.com/en-us/library/windows/apps/hh465757.aspx). <div class="bd-example"> <progress class="progress progress-striped" value="25" max="100"></progress> |