Standard duskmoon implemented 8 demos

Progress

Progress visualizes completion, loading, or capacity state.

Import @duskmoon-dev/components/progress

3 API sections

6 documented props

5 behavior scenarios

Key API

colorsizeindeterminatepercentshowInfoformat

Usage

When to use

Use it to clarify state, metadata, content hierarchy, or loading without creating a new workflow.
Pair it with semantic content so visual treatment never becomes the only source of meaning.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.

State Start with default props for static examples, then switch to controlled props when state must be shared.

Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Visual hierarchy

Focuses on status, metadata, empty/loading states, or content grouping without owning application state.

Theme integration

Uses DuskMoon tokens so the component follows the active docs theme.

Primary API surface

Progress is most often configured through `color`, `size`, `indeterminate`, `percent`.

Covered behavior

Renders determinate progress with default classes

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

primary

72%

secondary

72%

tertiary

72%

accent

72%

neutral

72%

base

72%

info

72%

success

72%

warning

72%

error

72%

Colors

authored

Progress supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.

Source

import "@duskmoon-dev/components/styles.css";
import { Progress } from "@duskmoon-dev/components/progress";

const colors = [
  "primary",
  "secondary",
  "tertiary",
  "accent",
  "neutral",
  "base",
  "info",
  "success",
  "warning",
  "error"
] as const;

export function ProgressColorsDemo() {
  return (<div style={{ display: "grid", gap: 10 }}>
  {colors.map((color) => (
    <Progress key={color} color={color} percent={72} showInfo />
  ))}
</div>);
}

Preview

68%

Basic usage

authored

Import the component stylesheet and Progress from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Progress } from "@duskmoon-dev/components/progress";

export function Example() {
  return (<Progress
  percent={68}
  showInfo
  color="success"
  size="lg"
/>);
}

Preview

68%

Renders determinate progress with default classes

test-backed

Progress scenario from the component test coverage: renders determinate progress with default classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Progress } from "@duskmoon-dev/components/progress";

export function ProgressRendersDeterminateProgressWithDemo() {
  return (<Progress
  percent={68}
  showInfo
  color="success"
  size="lg"
/>);
}

Preview

68%

Clamps percentage values

test-backed

Progress scenario from the component test coverage: clamps percentage values.

Source

import "@duskmoon-dev/components/styles.css";
import { Progress } from "@duskmoon-dev/components/progress";

export function ProgressClampsPercentageValuesDemo() {
  return (<Progress
  percent={68}
  showInfo
  color="success"
  size="lg"
/>);
}

Preview

primary

72%

secondary

72%

tertiary

72%

accent

72%

neutral

72%

base

72%

info

72%

success

72%

warning

72%

error

72%

Applies color, size, and indeterminate classes

test-backed

Progress scenario from the component test coverage: applies color, size, and indeterminate classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Progress } from "@duskmoon-dev/components/progress";

export function ProgressAppliesColorSizeAndDemo() {
  return (<Progress
  percent={68}
  showInfo
  color="success"
  size="lg"
/>);
}

Preview

68%

Renders formatted progress info

test-backed

Progress scenario from the component test coverage: renders formatted progress info.

Source

import "@duskmoon-dev/components/styles.css";
import { Progress } from "@duskmoon-dev/components/progress";

export function ProgressRendersFormattedProgressInfoDemo() {
  return (<Progress
  percent={68}
  showInfo
  color="success"
  size="lg"
/>);
}

Preview

68%

Applies custom className

test-backed

Progress scenario from the component test coverage: applies custom classname.

Source

import "@duskmoon-dev/components/styles.css";
import { Progress } from "@duskmoon-dev/components/progress";

export function ProgressAppliesCustomClassNameDemo() {
  return (<Progress
  percent={68}
  showInfo
  color="success"
  size="lg"
/>);
}

Preview

Sunshine Theme

68%

Moonlight Theme

68%

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Progress
  percent={68}
  showInfo
  color="success"
  size="lg"
/>
</div>

<div data-theme="moonlight">
  <Progress
  percent={68}
  showInfo
  color="success"
  size="lg"
/>
</div>

API

The API reference below lists every parsed exported type or interface for Progress. Start with `color`, `size`, `indeterminate`, `percent` for common usage.

Types: packages/components/src/components/progress/Progress.types.ts Scenarios: packages/components/src/components/progress/Progress.test.tsx

ProgressProps interface extends ComponentProps<"div">

Prop	Type	Required	Description
`color`	`ProgressColor`	No	color configures Progress.
`size`	`ProgressSize`	No	size configures Progress.
`indeterminate`	`boolean`	No	indeterminate configures Progress.
`percent`	`number`	No	percent configures Progress.
`showInfo`	`boolean`	No	showInfo configures Progress.
`format`	`(percent: number) => React.ReactNode`	No	format configures Progress.

ProgressColor type

| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"

ProgressSize type

"sm" | "md" | "lg" | "xl"