Progress

Displays an indicator showing the completion progress of a task.

CMSPayload CMS Integration

Progress indicators can be used to show upload progress, form completion, or any other measurable progress managed through CMS workflows.

CMS Demo

See how content editors configure progress indicators in a CMS:

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.

CMS ConfigurationSimulates Payload CMS progress configuration

Payload Block Example

// In your Payload CMS blocks config
export const ProgressBlock = {
  slug: "progress",
  fields: [
    { name: "label", type: "text", localized: true },
    { name: "value", type: "number", min: 0, max: 100 },
    { name: "showValue", type: "checkbox", defaultValue: true },
  ],
}

Rendering the Progress

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@mordecai-design-system/ui"

export function ProgressBar({ label, value, showValue }) {
  return (
    <Progress value={value}>
      <ProgressLabel>{label}</ProgressLabel>
      {showValue && <ProgressValue />}
    </Progress>
  )
}

Basic Usage

Simple progress

With label and value

Uploading...

Multiple progress bars

Storage

Memory

CPU

ProgressProgress indicator with label

Installation

pnpm add @corew500/ui

Usage

import {
  Progress,
  ProgressLabel,
  ProgressValue,
} from "@mordecai-design-system/ui"

<Progress value={33}>
  <ProgressLabel>Loading...</ProgressLabel>
  <ProgressValue />
</Progress>

Examples

Simple Progress

<Progress value={60} />

With Label and Value

<Progress value={75}>
  <ProgressLabel>Uploading</ProgressLabel>
  <ProgressValue />
</Progress>

Indeterminate

<Progress value={null} />

Sub-components

| Component | Description | |-----------|-------------| | Progress | Root container with value | | ProgressTrack | Background track | | ProgressIndicator | Filled indicator | | ProgressLabel | Descriptive label | | ProgressValue | Percentage display |

Props

Progress

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.

ProgressLabel

Standard label props with styling.

ProgressValue

Auto-displays the current percentage.