Skip to content

Progress

Displays progress with native HTML5 tags progress or meter

View Source 

Usage

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

Variants

  • default 
  • meter 

Props

  • default 

Tokens

  • sm
  • lg

Installation

Follow instructions for individual framework usage below

  • winduum 
  • winduum-vue 
  • winduum-react 

Examples

Colors

html
<progress class="x-progress accent-primary" value="25" max="100"></progress>
<progress class="x-progress accent-success" value="50" max="100"></progress>
<progress class="x-progress accent-error" value="75" max="100"></progress>
<progress class="x-progress accent-info" value="15" max="100"></progress>
<progress class="x-progress accent-warning" value="85" max="100"></progress>
vue
<script setup lang="ts">
    import { UiProgress } from '@/components/progress'
</script>

<template>
    <UiProgress class="accent-primary" value="25" max="100"></UiProgress>
    <UiProgress class="accent-success" value="50" max="100"></UiProgress>
    <UiProgress class="accent-error" value="75" max="100"></UiProgress>
    <UiProgress class="accent-info" value="15" max="100"></UiProgress>
    <UiProgress class="accent-warning" value="85" max="100"></UiProgress>
</template>
jsx
import { UiProgress } from '@/components/progress'

export function Example() {
    return (
        <>
            <UiProgress className="accent-primary" value="25" max="100"></UiProgress>
            <UiProgress className="accent-success" value="50" max="100"></UiProgress>
            <UiProgress className="accent-error" value="75" max="100"></UiProgress>
            <UiProgress className="accent-info" value="15" max="100"></UiProgress>
            <UiProgress className="accent-warning" value="85" max="100"></UiProgress>
        </>
    )
}

Small

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

Large

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

Indeterminate

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

Meter

html
<meter class="x-progress accent-main" value="50" min="0" max="100" low="33" optimum="80" high="66">25 out of 45</meter>

Released under the MIT License.