Polaris ViewComponents

Previews

No matching results.

Pages

No matching results.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div>
  <div class="Polaris-ProgressBar Polaris-ProgressBar--colorPrimary Polaris-ProgressBar--sizeMedium">
    <progress
    class="Polaris-ProgressBar__Progress"
    value="70"
    max="100"
  ></progress>
    <div style="--pc-progress-bar-duration: 200ms;--pc-progress-bar-percent: 0.7" class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__IndicatorAppearDone">
      <span class="Polaris-ProgressBar__Label">70%</span>
    </div>
  </div>
  <br>
  <div class="Polaris-ProgressBar Polaris-ProgressBar--colorHighlight Polaris-ProgressBar--sizeMedium">
    <progress
    class="Polaris-ProgressBar__Progress"
    value="50"
    max="100"
  ></progress>
    <div style="--pc-progress-bar-duration: 200ms;--pc-progress-bar-percent: 0.5" class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__IndicatorAppearDone">
      <span class="Polaris-ProgressBar__Label">50%</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 style="--pc-progress-bar-duration: 200ms;--pc-progress-bar-percent: 0.3" class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__IndicatorAppearDone">
      <span class="Polaris-ProgressBar__Label">30%</span>
    </div>
  </div>
  <br>
  <div class="Polaris-ProgressBar Polaris-ProgressBar--colorCritical Polaris-ProgressBar--sizeMedium">
    <progress
    class="Polaris-ProgressBar__Progress"
    value="90"
    max="100"
  ></progress>
    <div style="--pc-progress-bar-duration: 200ms;--pc-progress-bar-percent: 0.9" class="Polaris-ProgressBar__Indicator Polaris-ProgressBar__IndicatorAppearDone">
      <span class="Polaris-ProgressBar__Label">90%</span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
<div>
  <%= polaris_progress_bar(progress: 70, color: :primary) %>
  <br>
  <%= polaris_progress_bar(progress: 50, color: :highlight) %>
  <br>
  <%= polaris_progress_bar(progress: 30, color: :success) %>
  <br>
  <%= polaris_progress_bar(progress: 90, color: :critical) %>
</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.