diff options
Diffstat (limited to 'docs/components/progress.md')
| -rw-r--r-- | docs/components/progress.md | 28 |
1 files changed, 9 insertions, 19 deletions
diff --git a/docs/components/progress.md b/docs/components/progress.md index 802a42a29..5b9fcd924 100644 --- a/docs/components/progress.md +++ b/docs/components/progress.md @@ -1,20 +1,14 @@ --- layout: docs title: Progress -description: Documentation and examples for using Bootstrap progress bars. +description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels. group: components +toc: true --- -Use our custom progress component for displaying simple or complex progress bars. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - ## How it works -Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. +Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don't use [the HTML5 `<progress>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress), ensuring you can stack progress bars, animate them, and place text labels over them. - We use the `.progress` as a wrapper to indicate the max value of the progress bar. - We use the inner `.progress-bar` to indicate the progress so far. @@ -49,11 +43,7 @@ Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }} </div> {% endexample %} -## Customizing - -Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more. - -### Labels +## Labels Add labels to your progress bars by placing text within the `.progress-bar`. @@ -63,7 +53,7 @@ Add labels to your progress bars by placing text within the `.progress-bar`. </div> {% endexample %} -### Height +## Height We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly. @@ -76,7 +66,7 @@ We only set a `height` value on the `.progress-bar`, so if you change that value </div> {% endexample %} -### Backgrounds +## Backgrounds Use background utility classes to change the appearance of individual progress bars. @@ -95,7 +85,7 @@ Use background utility classes to change the appearance of individual progress b </div> {% endexample %} -### Multiple bars +## Multiple bars Include multiple progress bars in a progress component if you need. @@ -107,7 +97,7 @@ Include multiple progress bars in a progress component if you need. </div> {% endexample %} -### Striped +## Striped Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color. @@ -129,7 +119,7 @@ Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gra </div> {% endexample %} -### Animated stripes +## Animated stripes The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations. |
