@react-aria/progress

ProgressBar

The ProgressBar component provides a visual representation of progress. It uses the useProgressBar hook to manage accessibility attributes and the useProgressBarState hook to manage the state of the progress bar.

import { useProgressBar } from '@react-aria/progress';
import { useProgressBarState } from '@react-stately/progress';

function ProgressBar(props) {
  let { progressBarProps } = useProgressBar(props);
  let state = useProgressBarState(props);

  return (
    <div {...progressBarProps} style={{ width: '100%', backgroundColor: '#e0e0e0' }}>
      <div style={{ width: `${state.value}%`, backgroundColor: '#0078d4', height: '100%' }} />
    </div>
  );
}

CircularProgress

The CircularProgress component provides a circular progress indicator. It uses the useProgressCircle hook for accessibility and the useProgressCircleState hook to manage the state of the circular progress.

import { useProgressCircle } from '@react-aria/progress';
import { useProgressCircleState } from '@react-stately/progress';

function CircularProgress(props) {
  let { progressCircleProps } = useProgressCircle(props);
  let state = useProgressCircleState(props);

  return (
    <svg {...progressCircleProps} viewBox="0 0 100 100" width="100" height="100">
      <circle cx="50" cy="50" r="45" fill="none" stroke="#e0e0e0" strokeWidth="10" />
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="#0078d4"
        strokeWidth="10"
        strokeDasharray={Math.PI * 2 * 45}
        strokeDashoffset={Math.PI * 2 * 45 * (1 - state.value / 100)}
      />
    </svg>
  );
}