Progress

Displays progress with native HTML5 tags progress or meter

View Source 

Usage

@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

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

Large

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

Indeterminate

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

Meter

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