Progress

Show determinate or indeterminate progress with a bar or circle for uploads, processing, and loading.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Progress to show known or unknown completion. Set isIndeterminate when progress is unknown. Spinner can represent a simple wait, while GaugeChart can show a business metric.

value is a percentage from 0 to 100. Do not replace an unknown value with an invented percentage; use isIndeterminate.
variant selects line or circle. showLabel generates a circle label; explicit children replace the default label.

Import

import { Progress } from '@snowui-design-system/components';

Usage

Line

Circle

Line labels

Circle labels

Line indeterminate

Circle indeterminate

Colors

Size and thickness

API Reference

Property	Type	Default	Example	Description
`value`	`number`	`0`	`value={42}`	Percentage progress, automatically clamped to 0–100.
`variant`	`ProgressVariant`	`"line"`	`variant={value}`	Line or circular appearance.
`size`	`number \| string`	`16`	`size="Example"`	Circle width and height, sharing the default size with Spinner.
`thickness`	`number \| string`	`—`	`thickness="Example"`	Line height or ring thickness. Circle and indeterminate appearances align with Spinner ring width. Defaults to 4 for a determinate line, or 15% of size for circle and indeterminate (2.4px at size=16).
`background`	`SnowUIColor \| string`	`"Black4"`	`background="Example"`	Track background color.
`color`	`SnowUIColor \| string`	`"Primary"`	`color="Example"`	Fill color.
`isIndeterminate`	`boolean`	`false`	`isIndeterminate`	Show an indeterminate state when completion is unknown.
`showLabel`	`boolean`	`false`	`showLabel`	Only applies to circle. In a determinate state, generates an internal Text label showing the current value.
`loopMotion`	`LoopMotionConfig`	`—`	`loopMotion={{ duration: 1200 }}`	Override looping timing for the indeterminate animation.
`children`	`Snippet`	`—`	`<Progress value={60}><Frame as="label">…</Frame></Progress>`	Explicit label composition; replaces the generated circle label when present.
`parts`	`ComponentPartsOf<{ Text: typeof Text }>`	`—`	`parts={{ Text: { color: "Black100" } }}`	Configure the generated circle Text label.