animui

Progress

Show how much of a known task is complete.

npm install https://animui.stracture.net/__local/package.tgz
Live · keyboard ready
  • Determinate progress for uploads, imports, or long tasks.
  • Progress with a visible percentage and a check at completion, via showValue.
  • Use skeleton while content is loading with no progress to report.
  • Use usage-meter for quota against a limit, and gauge for dashboard metrics.
  • Use stepper to show position in a multi-step flow.

Installation

Install animui once, then import any component or block from its typed package entry.

animui · 250 components and blocks

React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.

npm install https://animui.stracture.net/__local/package.tgz

Load the stylesheet once at your app root, then use the typed component import:

import 'animui/styles.css';
import { Progress } from 'animui/progress';

Read the Code tab for the implementation files and the API reference below for required props.

Download animui 0.3.0 · Agent guide
example.tsx
import { Progress } from "animui/progress"; export function UploadProgress({ sent, size }: { sent: number; size: number }) {  return <Progress label="Uploading report.pdf" value={sent} max={size} showValue />;}

Progress

A linear progress bar with an optional label and a counted percentage that matches the fill.

PropTypeDefaultDescription
valuenumber0Current value, clamped between 0 and max.
maxnumber100Value that counts as complete.
labelstring–Visible label and aria-label. Falls back to "Progress" for assistive tech.
showValuebooleanfalseShows the counted percentage and a check at 100%.
...propsOmit<HTMLAttributes<HTMLDivElement>, "children">–Forwarded to the progressbar element, such as className.
  • Renders role="progressbar" with aria-valuemin, aria-valuemax, aria-valuenow, and a percentage aria-valuetext.
  • Label changes crossfade; outgoing copies are aria-hidden while they fade.
  • It is not a live region; announce completion separately if it matters.
  • One smooth spring drives both the fill and the counted number, so they always agree. The fill slides in from the left to keep its rounded end.
  • At 100% the fill turns to the success colour and a check settles in beside the count.
  • Reduced motion jumps the fill and count to the new value.
  • The bar fills its container width, so it works in cards, rows, and full-width layouts.
  • One spring drives both the fill and the counted number; no observers or timers.
  • It is not a live region, so announce completion separately if it matters.

Notes for AI

Give your coding assistant the Markdown reference instead of screenshots.

  • Use for determinate task progress. Use skeleton while content has no progress to report, gauge or activity-rings for dashboard metrics, and usage-meter for quota against a limit.
  • Pass raw value and max; the percentage is computed and clamped for you.
/components/progress/markdown

The full library index for assistants is at /llms.txt.

Usage meterComponentShow what fills an allowance and how close it is to the limit.SkeletonComponentReserve space while content is still loading.GaugeComponentShow a value against a known range.StepperComponentShow where a person is in a multi-step flow and what is done.