x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<div> <div class="Polaris-ProgressBar Polaris-ProgressBar--colorPrimary Polaris-ProgressBar--sizeMedium"> <progress class="Polaris-ProgressBar__Progress" value="70" max="100" ></progress> <div class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__Animated" style="width: 70%;" > <span class="Polaris-ProgressBar__Label">70%</span> </div> </div> <br /> <div class="Polaris-ProgressBar Polaris-ProgressBar--colorSuccess Polaris-ProgressBar--sizeMedium"> <progress class="Polaris-ProgressBar__Progress" value="30" max="100" ></progress> <div class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__Animated" style="width: 30%;" > <span class="Polaris-ProgressBar__Label">30%</span> </div> </div></div>
1
2
3
4
5
<div> <%= polaris_progress_bar(progress: 70, color: :primary) %> <br /> <%= polaris_progress_bar(progress: 30, color: :success) %></div>
Use the color option when you need to blend the progress bar in a context that calls for it, such as a progress toward success or where it’s the primary focus.
No params configured.