Progress 📊⏳

Hello Progress Tracker! 🚀

The progress module helps you create accessible and good-looking progress bars. Whether you're showing file upload progress, a setup wizard's completion, or just how much of a task is done, this component has got you covered! 💪

It's like a little visual cheerleader 📣 for your users, showing them how far they've come and how close they are to the finish line!

Key Features:

• ✅ Accessible: Implements ARIA attributes for progress bars (aria-valuenow, aria-valuemin, aria-valuemax).
• 🔢 Determinate & Indeterminate: Supports both known progress values and an "I'm working on it!" indeterminate state.
• 🎨 Styleable: Easily customizable to fit your app's look and feel.
• 🧩 Composable: Typically consists of Progress.Root (the container) and Progress.Indicator (the part that fills up).

Basic Usage:

import * as Progress from '@ryvora/react-progress';
import React, { useState, useEffect } from 'react';

function MyLoadingComponent() {
  const [progressValue, setProgressValue] = useState(0);

  useEffect(() => {
    // Simulate progress
    if (progressValue < 100) {
      const timer = setTimeout(() => setProgressValue(progressValue + 10), 500);
      return () => clearTimeout(timer);
    }
  }, [progressValue]);

  return (
    <div>
      <p>Loading... {progressValue}%</p>
      <Progress.Root value={progressValue} max={100} style={{ width: '300px', height: '20px' }}>
        <Progress.Indicator
          style={{ width: `${progressValue}%`, height: '100%', backgroundColor: 'green' }}
        />
      </Progress.Root>

      {/* Indeterminate example */}
      {/* <Progress.Root value={null} style={{ width: '300px', height: '20px' }}> */}
      {/*   <Progress.Indicator style={{ width: '50%', height: '100%', backgroundColor: 'blue' }} /> */}
      {/* </Progress.Root> */}
    </div>
  );
}

Show that progress and keep your users in the loop! 🔄🎉