Progress

Installation#

npmpnpmyarnbun

npx sugarcoat add progress

Default

Available in four sizes to fit different UI contexts.

Sizes

Progress bars support multiple color palettes.

Colors

Values

Use indeterminate state when the progress duration is unknown.

Indeterminate

Animated

File Upload

With Label

<Progress value={50}>
  <Progress.Track>
    <Progress.Indicator />
  </Progress.Track>
</Progress>

Import

import { Progress } from "@sugarcoat/ui-nxt";

Usage

<Progress value={75} color="primary" size="md">
<Progress.Track>
  <Progress.Indicator />
</Progress.Track>
</Progress>

Prop	Type	Default	Description
value	number \| null	-	Current progress value (0-100). Use null for indeterminate state.
size	"xs" \| "sm" \| "md" \| "lg"	"sm"	Size of the progress bar
color	"default" \| "primary" \| "accent" \| "success" \| "danger" \| "gradient"	"primary"	Color palette for the progress indicator
max	number	100	Maximum value for the progress
min	number	0	Minimum value for the progress