Wensity

Progress

Progress indicators in linear, circular, segmented, indeterminate, and stacked forms for uploads and onboarding.

progressloadingbarcircularstepsindeterminatecapacitydashboard
Loading preview

Examples

Practical examples and common states for the same installable component.

Linear

Standard progress bar with animated value changes.

examples/progress-linear.tsx
import { Progress } from "@/components/wensity/progress";


export function LinearProgress() {
  return <Progress value={48} label="Upload" showValue tone="brand" />;
}

Circular

Compact radial progress for cards and metric tiles.

examples/progress-circular.tsx
import { CircularProgress } from "@/components/wensity/progress";


export function CircularProgressDemo() {
  return (
    <CircularProgress value={68} label="CPU usage" tone="brand" size={56} />
  );
}

Segmented

Multi-step progress for checkout or onboarding flows.

examples/progress-segmented.tsx
import { SegmentedProgress } from "@/components/wensity/progress";


export function SegmentedProgressDemo() {
  return (
    <SegmentedProgress
      steps={4}
      current={2}
      labels={["Account", "Billing", "Team", "Launch"]}
    />
  );
}

Indeterminate

Loading animation when completion is unknown.

examples/progress-indeterminate.tsx
import { Progress } from "@/components/wensity/progress";


export function IndeterminateProgress() {
  return <Progress indeterminate label="Syncing workspace" tone="brand" />;
}

Stacked

Multiple values in one capacity bar with legend.

examples/progress-stacked.tsx
import { StackedProgress } from "@/components/wensity/progress";


export function StackedProgressDemo() {
  return (
    <StackedProgress
      max={100}
      segments={[
        { value: 42, tone: "brand", label: "Components" },
        { value: 28, tone: "success", label: "Templates" },
        { value: 14, tone: "warning", label: "Docs" },
      ]}
    />
  );
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add progress

Usage

Import Progress from @/components/wensity/progress and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { Progress } from "@/components/wensity/progress";


export function ProgressDemo() {
  return <Progress value={62} showValue label="Deployment" tone="brand" />;
}

Props

PropTypeDefaultDescription
valuenumber0Current progress, measured against max.
maxnumber100Value that counts as complete.
size"sm" | "md" | "lg""md"Track thickness.
tone"neutral" | "brand" | "success" | "warning" | "danger""brand"Colour of the filled track.
labelstring"Progress"Accessible label for the progress bar.
showValuebooleanfalseShows the numeric percentage beside the track.
indeterminatebooleanfalseRuns a looping animation for work of unknown duration.