Progress

The Progress component visually represents the completion status of a task or process. It provides users with feedback on how far they’ve progressed.

Usage

To use the Progress component, import it and provide a value prop indicating the percentage of completion.

import { Progress } from "@rhinolabs/ui";
import { useState, useEffect } from "react";

export default function ProgressDemo() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => (prev < 100 ? prev + 10 : 100));
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return (
    <Progress value={progress} />
  );
}

Examples

Basic Progress Bar

This example demonstrates a simple progress bar that animates to 75% completion.

import { Progress } from "@rhinolabs/ui";

export function BasicProgressDemo() {
  return <Progress value={75} />;
}

Animated Progress Bar

You can dynamically update the value prop to create an animated progress bar, as shown in the usage example.

import { Progress } from "@rhinolabs/ui";
import { useState, useEffect } from "react";

export function AnimatedProgressDemo() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => (prev < 100 ? prev + 5 : 100));
    }, 300);
    return () => clearInterval(interval);
  }, []);

  return (
    <Progress value={progress} />
  );
}

Progress Bar with Custom Styling

You can customize the appearance of the Progress component using the className prop to apply your own CSS styles.

import { Progress } from "@rhinolabs/ui";

export function CustomStyleProgressDemo() {
  return (
    <Progress
      value={40}
      className="h-4 rounded-md bg-accent/30"
      style={{
        '& [data-slot="progress-indicator"]': {
          backgroundColor: 'var(--accent)',
        },
      }}
    />
  );
}

Props

Progress Props

Prop	Type	Default	Description
value	number	0	The current progress value, ranging from 0 to 100.
className	string	-	Additional CSS classes to apply to the root progress element.
...props	React.HTMLAttributes<HTMLDivElement>	-	All other standard HTML attributes for the root progress element.

Design Considerations

• Use the Progress component to provide clear visual feedback for ongoing processes.
• Ensure the progress bar is appropriately sized and positioned within the UI.
• Consider providing textual feedback alongside the progress bar for better accessibility.
• Avoid using progress bars for actions that complete very quickly, as this can be distracting.

Accessibility

• The Progress component uses the semantic <progress> element under the hood, which provides inherent accessibility features.
• The aria-valuenow, aria-valuemin, and aria-valuemax attributes are managed internally based on the value prop.
• Ensure sufficient color contrast between the progress indicator and the background for users with visual impairments.
• For longer processes, consider providing additional information about the estimated time remaining.