3.0.0-alpha.11 Alpha
Native Styles

Progress Bar

<progress> Experimental

Progress bars are used to show the status of an ongoing operation.

Want to do more? Check out the <wa-progress-bar> component! 
<progress value="40" max="100"></progress>

Indeterminate:

<progress></progress>

Custom Height

Use the height CSS property to set the progress bar's height.

<wa-progress-bar value="50" style="height: 6px;"></wa-progress-bar>

Opting In to Native Progress Bar Styles

If you want to use the Native Progress Bar styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/progress.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.11/dist/styles/native/progress.css');

To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.

    No results