+ 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>
+
+
+
+
+