Feedback

Progress

Server Component

Determinate progress bar.

Import

tsx

import { Progress } from "@cronus-ui/ui";

bash

npx cronus-ui add progress

Examples

Determinate

Determinate progress bars — the middle bar animates in on mount.

tsx

function ProgressDemo() {
  const [animated, setAnimated] = useState(0);

  useEffect(() => {
    const timer = setTimeout(() => setAnimated(66), 400);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="flex w-full max-w-sm flex-col gap-6">
      <Progress value={30} aria-label="Storage used" />
      <Progress value={animated} aria-label="Upload progress" />
      <Progress value={100} aria-label="Sync complete" />
    </div>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

half.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component ProgressHalf layout:inline style:progress {
  value:50
  aria-label:"Upload progress"
  label "Upload progress"
}

page "/audit/progress/half" type:custom {
  use ProgressHalf
}

API Reference

Generated from the component's exported types.

ProgressProps

Extends ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>

Prop	Type	Default	Description
`value`	`number \| null`	—	Current progress. `null` for indeterminate.
`max`	`number`	`100`	—
`asChild`	`boolean`	—	Render as the child element via Slot.