Progress Bar

Progress Bar Component

The Progress Bar component provides a visual representation of progress, completion status, or relative value.

Example

Preview Code

Copy

<div style="display:flex;flex-direction:column;gap:16px;max-width:300px"><div class="progress skin-primary" style="--progress-value:0.25" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" aria-label="25% Complete"></div><div class="progress skin-primary" style="--progress-value:0.5" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-label="50% Complete"></div><div class="progress skin-primary" style="--progress-value:0.75" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="75% Complete"></div><div class="progress skin-primary" style="--progress-value:1" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-label="100% Complete"></div></div>

<div style="display:flex;flex-direction:column;gap:16px;max-width:300px"><div class="progress skin-primary" style="--progress-value:0.25" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" aria-label="25% Complete"></div><div class="progress skin-primary" style="--progress-value:0.5" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50" aria-label="50% Complete"></div><div class="progress skin-primary" style="--progress-value:0.75" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="75" aria-label="75% Complete"></div><div class="progress skin-primary" style="--progress-value:1" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100" aria-label="100% Complete"></div></div>

Usage

import ProgressBar from "@altitude/ui/react/ui/progress-bar";

export default function ProgressExample() {
  // For static progress
  return (
    <div>
      <ProgressBar
        value={65}
        maxValue={100}
        label="Download progress"
        className="skin-primary"
      />
    </div>
  );

  // For dynamic progress
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(timer);
          return 100;
        }
        return prev + 5;
      });
    }, 500);

    return () => clearInterval(timer);
  }, []);

  return (
    <div>
      <p>Loading: {progress}%</p>
      <ProgressBar
        value={progress}
        maxValue={100}
        label="Loading progress"
        className="skin-primary"
      />
    </div>
  );
}

Props

Prop	Type	Required	Description
value	number	No	Current progress value (default: 50)
maxValue	number	No	Maximum progress value (default: 100)
label	string	No	Accessible label describing the progress (default: “Progress”)
className	string	No	Additional CSS classes for styling

Features

• Accessible: Includes proper ARIA attributes for screen readers
• Customizable: Supports custom skin classes for different visual styles
• Normalized: Automatically calculates and constrains progress percentage
• Flexible: Can be used for various types of progress indicators

CSS Integration

The Progress Bar component uses CSS custom properties:

• --progress-value: Set internally based on value/maxValue ratio

You can style the progress bar using skin classes:

• skin-primary: Primary theme color
• skin-secondary: Secondary theme color
• skin-success: Success/completion indicator