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