Netzo Logo

progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

shadcn/ui radix-ui Storybook Figma

Usage

After installation components can be imported and used directly.

import { Progress } from 'netzo/components/progress.tsx'

Examples

Working examples to copy-paste into projects under components/.

Default

import { Progress } from "netzo/components/progress.tsx";
import { useEffect, useState } from "preact/compat";

export default () => {
  const [progress, setProgress] = useState(13);

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

  return <Progress value={progress} className="w-[60%]" />;
};