Skip to content

Progress

Displays progress with native HTML5 tags progress or meter

View Source 

Usage

css
@import "winduum/src/ui/progress/index.css" layer(components);

Variants

  • default 
  • meter 

Props

  • default-props 

Tokens

  • sm
  • lg

Examples

Colors

html
<progress class="ui-progress accent-primary" value="25" max="100"></progress>
<progress class="ui-progress accent-success" value="50" max="100"></progress>
<progress class="ui-progress accent-error" value="75" max="100"></progress>
<progress class="ui-progress accent-info" value="15" max="100"></progress>
<progress class="ui-progress accent-warning" value="85" max="100"></progress>

Small

html
<progress class="ui-progress sm" value="50" max="100"></progress>

Large

html
<progress class="ui-progress lg" value="50" max="100"></progress>

Indeterminate

html
<progress class="ui-progress" max="100"></progress>

Released under the MIT License.