Progress

Progress bar indicator

Basic Usage

Simple progress

With label and value

Uploading...

Multiple progress bars

Storage

Memory

CPU

pnpm add @corew500/ui

import { Progress } from "@corew500/ui/progress"

<Progress>Content</Progress>

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

Upload Progress

CMS FieldsEN

Label

Value (65%)

Show Label

Show Value

This simulates how a content editor configures progress bars in Payload CMS. Labels can be localized for different languages.

Prop	Type	Default	Description
`aria-valuetext`	string	—	A string value that provides a user-friendly name for `aria-valuenow`, the current value of the meter.
`format`	NumberFormatOptions	—	Options to format the value.
`getAriaValueText`	(formattedValue: string, value: number) => string	—	Accepts a function which returns a string value that provides a human-readable text alternative for the current value of the progress bar.
`locale`	enum	—	The locale used by `Intl.NumberFormat` when formatting the value. Defaults to the user's runtime locale.
`max`	number	`100`	The maximum value.
`min`	number	`0`	The minimum value.
`value*`	number	`null`	The current value. The component is indeterminate when value is `null`.
`style`	enum	—	Style applied to the element, or a function that returns a style object based on the component’s state.
`className`	enum	—	CSS class applied to the element, or a function that returns a class based on the component’s state.
`render`	enum	—	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.