x
<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>
<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.