mirror of
https://github.com/twbs/bootstrap.git
synced 2025-01-10 03:46:13 +01:00
b46f05a948
This commit includes all the needed workarounds and most changes from the main branch for everything to work, like: * removing empty lines in raw HTML that break output * read .browserslistrc, CSS variables from disk instead of duplicating it * using Hugo mounts * using Hugo for the docs CSS/JS * move ToC Sass code to a separate file while adapting it for Hugo Thus, this patch makes our npm scripts faster since lint runs on one step and there's no separate docs assets processing.
140 lines
6.1 KiB
Markdown
140 lines
6.1 KiB
Markdown
---
|
|
layout: docs
|
|
title: Progress
|
|
description: Documentation and examples for using Bootstrap custom progress bars featuring support for stacked bars, animated backgrounds, and text labels.
|
|
group: components
|
|
toc: true
|
|
---
|
|
|
|
## How it works
|
|
|
|
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.
|
|
- The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width.
|
|
- The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible.
|
|
|
|
Put that all together, and you have the following examples.
|
|
|
|
{{< example >}}
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
Bootstrap provides a handful of [utilities for setting width]({{< docsref "/utilities/sizing" >}}). Depending on your needs, these may help with quickly configuring progress.
|
|
|
|
{{< example >}}
|
|
<div class="progress">
|
|
<div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
## Labels
|
|
|
|
Add labels to your progress bars by placing text within the `.progress-bar`.
|
|
|
|
{{< example >}}
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
## Height
|
|
|
|
We only set a `height` value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly.
|
|
|
|
{{< example >}}
|
|
<div class="progress" style="height: 1px;">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress" style="height: 20px;">
|
|
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
## Backgrounds
|
|
|
|
Use background utility classes to change the appearance of individual progress bars.
|
|
|
|
{{< example >}}
|
|
<div class="progress">
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
## Multiple bars
|
|
|
|
Include multiple progress bars in a progress component if you need.
|
|
|
|
{{< example >}}
|
|
<div class="progress">
|
|
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
|
|
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
## Striped
|
|
|
|
Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color.
|
|
|
|
{{< example >}}
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
|
</div>
|
|
{{< /example >}}
|
|
|
|
## 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.
|
|
|
|
<div class="bd-example">
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
|
</div>
|
|
<button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false">
|
|
Toggle animation
|
|
</button>
|
|
</div>
|
|
|
|
```html
|
|
<div class="progress">
|
|
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
|
</div>
|
|
```
|