--- layout: default.html title: Progress Bars description: These progress bars are easy to create and render consistently in all browsers. --- ## Progress Bars HTML5 introduced the `` 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](utilities.html#sizing-utilities) or set the width explicitly on the `progress-bar` element. An optional text label can be included inside the `progress-bar` element. ```html
25%
50%
75%
```
25%
50%
75%
When progress can’t be determined, use the `progress-indeterminate` modifier to set an indeterminate state. ```html
```
### Variations Use the `progress-*` modifier to create variations. ```html
50%
50%
50%
50%
50%
50%
50%
```
50%
50%
50%
50%
50%
50%
50%