Progress

Displays progress with native HTML5 tags progress or meter

View Source 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Styles

Variants

• default 
• meter 

Props

• default 

Tokens

• sm
• lg

Examples

Colors

winduum

<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>

winduum-vue

<script setup lang="ts">
    import { Progress } from '@/components/progress'
</script>

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

winduum-react

import { Progress } from '@/components/progress'

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

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>