Reactberry

Progress

Show progress as an animated bar, a pie, or a labelled circle.

Progress is a client component that renders one of three indicators: a horizontal bar (animated with motion), an SVG pie, or an SVG circle with a centred label. Use it for uploads, quotas and completion status. It is built on Box and reads colours from the active theme, so it should render inside DesignSystemProvider.

40%

Import#

typescript
import { Progress } from "@reactberry/system/blocks";

Usage#

typescript
import { Progress } from "@reactberry/system/blocks";
import { Box, Text } from "@reactberry/system/elements";

export default function UploadStatus({ percent }: { percent: number }) {
  return (
    <Box display="flex" flexDirection="column" gap="xs">
      <Text>Uploading… {percent}%</Text>
      <Progress progress={percent} />
    </Box>
  );
}

Examples#

Reversed bar with custom colours#

Set reverse to fill from the right edge. progressColor, trackColor and height restyle the bar.

Storage40% free

Circle with a label#

The circle shows label in the centre, or the percentage when no label is set. sqSize and strokeWidth control its size and line width.

18 / 25Lessons completed

Pie#

The pie suits compact status icons in lists. size sets its width and height.

Design review
API migration
Release notes

API#

Progress#

PropTypeDefaultDescription
variant
"circle""pie""bar"
"bar"

Indicator to render. Any value other than "pie" or "circle" renders the bar.

progress
number
0

Current value as a percentage (0–100).

progressColor
string
brand

Colour token or CSS colour of the filled portion.

trackColor
string
transparent.light.1

Colour token or CSS colour of the unfilled track.

Variant-specific props:

PropTypeDefaultDescription
reverse
boolean
false

Bar only. Fills from the right edge instead of the left.

size
string
"2rem"

Pie only. Width and height of the SVG.

sqSize
number
100

Circle only. Width and height of the SVG and its viewBox.

strokeWidth
number
1

Circle only. Stroke width in pixels for the track and the progress arc.

label
string
—

Circle only. Text shown in the centre; falls back to ${progress}%.

ProgressProps has an index signature, so all remaining props are spread onto the root Box: the track div for the bar, and the svg element for the pie and circle.

Accessibility#

  • No ARIA role or value attributes (such as role="progressbar" or aria-valuenow) are set. Add them through the spread props, or provide adjacent text, when the value must be announced.

Notes#

  • The pie normalises its arc with pathLength={100}, so progress maps directly to the filled percentage. Values are clamped to 0–100. The bar and circle do not clamp progress.
  • The bar is 0.25rem high by default; pass height to override it.
  • The bar animates its width through motion. No reduced-motion check is performed by the component.
  • The circle variant's label is rendered as SVG text using the secondary colour and fontWeight 600.
  • A getProgressColor helper exists in src/blocks/Progress/getProgressColor.ts but is not exported from @reactberry/system/blocks.