Progress
Displays the completion status of a task. Supports deterministic fill, five colour variants, three sizes, and an indeterminate animated mode.
Variants
import { Progress } from "@usevyre/react";
<Progress value={30} />
<Progress value={65} variant="accent" />
<Progress value={90} variant="success" />
<Progress value={45} variant="danger" />
<Progress indeterminate /><script setup>
import { Progress } from "@usevyre/vue";
</script>
<template>
<Progress :value="30" />
<Progress :value="65" variant="accent" />
<Progress :value="90" variant="success" />
<Progress :value="45" variant="danger" />
<Progress :indeterminate="true" />
</template>Sizes
<Progress value={60} size="sm" variant="accent" />
<Progress value={60} size="md" variant="accent" />
<Progress value={60} size="lg" variant="accent" /><Progress :value="60" size="sm" variant="accent" />
<Progress :value="60" size="md" variant="accent" />
<Progress :value="60" size="lg" variant="accent" />Props
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value. Omit when using indeterminate. |
max | number | 100 | Maximum value. |
indeterminate | boolean | false | Shows an animated pulse instead of a fill bar. |
size | "sm" | "md" | "lg" | "md" | Bar height. |
variant | "default" | "accent" | "teal" | "success" | "danger" | "default" | Fill colour. |
class | string | — | Additional CSS class. |
Valid props
| Prop | Values | Default |
|---|---|---|
size | "sm"|"md"|"lg" | md |
variant | "default"|"accent"|"teal"|"success"|"danger" | default |
Common AI mistakes
- value > 100→ Normalize your value to 0–100 range before passing
Quick examples
Upload progress
<Progress value={uploadPercent} variant="accent" size="sm" />