@usevyre/react @usevyre/vue

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

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.

AI Context

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

← Popover Select →