Progress Bars
HTML5 introduced the <progress>
element, but it’s not currently possible to style consistently in all browsers. As a result, Shoelace offers a custom alternative.
Create a progress bar with the following markup. Use the progress-small
and progress-big
modifiers to change the size. To set the state, use a sizing utility or set the width explicitly on the progress-bar
element.
An optional text label can be included inside the progress-bar
element.
<div class="progress progress-small">
<div class="progress-bar width-25">25%</div>
</div>
<div class="progress">
<div class="progress-bar width-50">50%</div>
</div>
<div class="progress progress-big">
<div class="progress-bar width-75">75%</div>
</div>
When progress can’t be determined, use the progress-indeterminate
modifier to set an indeterminate state.
<div class="progress progress-indeterminate">
<div class="progress-bar"></div>
</div>