1
2 // Progressbar
3
4 // Progressbar striped
5 <div
6 class="progress mb-5"
7 role="progressbar"
8 aria-label="Animated striped example"
9 aria-valuenow="10"
10 aria-valuemin="0"
11 aria-valuemax="100"
12 >
13 <div
14 class="progress-bar progress-bar-striped progress-bar-animated"
15 style={{ width: '10%' }}
16 >
17 10%
18 </div>
19 </div>
20
21 // Colored progressbar
22 <div class="progress mb-2">
23 <div
24 class="progress-bar bg-success"
25 role="progressbar"
26 aria-valuenow={10}
27 aria-valuemin={0}
28 aria-valuemax={100}
29 >
30 10%
31 </div>
32 </div>
33 <div class="progress mb-2">
34 <div
35 class="progress-bar bg-black"
36 role="progressbar"
37 style={{ width: '25%' }}
38 aria-valuenow={25}
39 aria-valuemin={0}
40 aria-valuemax={100}
41 >
42 25%
43 </div>
44 </div>
45 <div class="progress mb-2">
46 <div
47 class="progress-bar bg-danger"
48 role="progressbar"
49 style={{ width: '50%' }}
50 aria-valuenow={50}
51 aria-valuemin={0}
52 aria-valuemax={100}
53 >
54 50%
55 </div>
56 </div>
57 <div class="progress mb-2">
58 <div
59 class="progress-bar bg-success"
60 role="progressbar"
61 style={{ width: '75%' }}
62 aria-valuenow={75}
63 aria-valuemin={0}
64 aria-valuemax={100}
65 >
66 75%
67 </div>
68 </div>
69 <div class="progress mb-2">
70 <div
71 class="progress-bar bg-warning text-black"
72 role="progressbar"
73 style={{ width: '100%' }}
74 aria-valuenow={100}
75 aria-valuemin={0}
76 aria-valuemax={100}
77 >
78 100%
79 </div>
80 </div>
81