Progress
MD3 linear progress indicator.
Try it
Knobs
tone size <script> import { Progress } from 'omaris';</script><Progress value={64} label="Uploading" />Walkthrough
1. Linear
A value when you know how far along — an upload; none when you do not, and the track animates instead of filling.
<script lang="ts"> import { Progress } from 'omaris';</script><div class="flex w-full max-w-md flex-col gap-6"> <Progress value={72} label="Uploading" /> <Progress label="Working" /> <Progress value={40} tone="success" size="lg" label="Large, success" /></div>2. Circular
No value spins — a wait inside a small space; a value counts a ring, for storage used or step three of six.
68%
<script lang="ts"> import { CircularProgress } from 'omaris';</script><CircularProgress label="Loading" /><CircularProgress value={68} label="68 percent complete" /><CircularProgress value={68} size="lg" tone="tertiary" label="68 percent complete"> <span class="text-label-lg tabular-nums">68%</span></CircularProgress><CircularProgress size="xs" label="Loading" />