Wensity

Progress

Progress UI for uploads, onboarding, and capacity states.

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" },
      ]}
    />
  );
}