]>
Commit | Line | Data |
---|---|---|
91e44d91 S |
1 | --- |
2 | layout: docs | |
3 | title: Progress | |
4 | description: Documentation and examples for using Bootstrap progress bars. | |
5 | group: components | |
6 | --- | |
7 | ||
8 | 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. | |
9 | ||
10 | ## Contents | |
11 | ||
12 | * Will be replaced with the ToC, excluding the "Contents" header | |
13 | {:toc} | |
14 | ||
15 | ## How it works | |
16 | ||
17 | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. | |
18 | ||
19 | - We use the `.progress` as a wrapper to indicate the max value of the progress bar. | |
20 | - We use the inner `.progress-bar` to indicate the progress so far. | |
21 | - The `.progress-bar` requires an inline style, utility class, or custom CSS to set their width. | |
22 | - The `.progress-bar` also requires some `role` and `aria` attributes to make it accessible. | |
23 | ||
24 | Put that all together, and you have the following examples. | |
25 | ||
26 | {% example html %} | |
27 | <div class="progress"> | |
28 | <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> | |
29 | </div> | |
30 | <div class="progress"> | |
31 | <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> | |
32 | </div> | |
33 | <div class="progress"> | |
34 | <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> | |
35 | </div> | |
36 | <div class="progress"> | |
37 | <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> | |
38 | </div> | |
39 | <div class="progress"> | |
40 | <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> | |
41 | </div> | |
42 | {% endexample %} | |
43 | ||
44 | Bootstrap provides a handful of [utilities for setting width]({{ site.baseurl }}/utilities/sizing/). Depending on your needs, these may help with quickly configuring progress. | |
45 | ||
46 | {% example html %} | |
47 | <div class="progress"> | |
48 | <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> | |
49 | </div> | |
50 | {% endexample %} | |
51 | ||
52 | ## Customizing | |
53 | ||
54 | Customize the appearance of your progress bars with custom CSS, background utilities, stripes, and more. | |
55 | ||
56 | ### Labels | |
57 | ||
58 | Add labels to your progress bars by placing text within the `.progress-bar`. | |
59 | ||
60 | {% example html %} | |
61 | <div class="progress"> | |
62 | <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div> | |
63 | </div> | |
64 | {% endexample %} | |
65 | ||
66 | ### Height | |
67 | ||
68 | We only set a `height` value on the `.progress-bar`, so if you change that value the outer `.progress` will automatically resize accordingly. | |
69 | ||
70 | {% example html %} | |
71 | <div class="progress"> | |
72 | <div class="progress-bar" role="progressbar" style="width: 25%; height: 1px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> | |
73 | </div> | |
74 | <div class="progress"> | |
75 | <div class="progress-bar" role="progressbar" style="width: 25%; height: 20px;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> | |
76 | </div> | |
77 | {% endexample %} | |
78 | ||
79 | ### Backgrounds | |
80 | ||
81 | Use background utility classes to change the appearance of individual progress bars. | |
82 | ||
83 | {% example html %} | |
84 | <div class="progress"> | |
85 | <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> | |
86 | </div> | |
87 | <div class="progress"> | |
88 | <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> | |
89 | </div> | |
90 | <div class="progress"> | |
91 | <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> | |
92 | </div> | |
93 | <div class="progress"> | |
94 | <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> | |
95 | </div> | |
96 | {% endexample %} | |
97 | ||
98 | ### Multiple bars | |
99 | ||
100 | Include multiple progress bars in a progress component if you need. | |
101 | ||
102 | {% example html %} | |
103 | <div class="progress"> | |
104 | <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div> | |
105 | <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div> | |
106 | <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div> | |
107 | </div> | |
108 | {% endexample %} | |
109 | ||
110 | ### Striped | |
111 | ||
112 | Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar's background color. | |
113 | ||
114 | {% example html %} | |
115 | <div class="progress"> | |
116 | <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div> | |
117 | </div> | |
118 | <div class="progress"> | |
119 | <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> | |
120 | </div> | |
121 | <div class="progress"> | |
122 | <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> | |
123 | </div> | |
124 | <div class="progress"> | |
125 | <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> | |
126 | </div> | |
127 | <div class="progress"> | |
128 | <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> | |
129 | </div> | |
130 | {% endexample %} | |
131 | ||
132 | ### Animated stripes | |
133 | ||
134 | The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations. | |
135 | ||
136 | **Animated progress bars don't work in Opera 12**—as they don't support CSS3 animations. | |
137 | ||
138 | <div class="bd-example"> | |
139 | <div class="progress"> | |
140 | <div class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div> | |
141 | </div> | |
142 | <button type="button" class="btn btn-secondary bd-toggle-animated-progress" data-toggle="button" aria-pressed="false" autocomplete="off"> | |
143 | Toggle animation | |
144 | </button> | |
145 | </div> | |
146 | ||
147 | {% highlight html %} | |
148 | <div class="progress"> | |
149 | <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> | |
150 | </div> | |
151 | {% endhighlight %} |