Progress

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

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

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

  return (
    <Progress.Root
      value={progress}
      style={{
        position: 'relative',
        overflow: 'hidden',
        background: 'lightgray',
        borderRadius: 99999,
        width: 300,
        height: 25,
      }}
    >
      <Progress.Indicator
        style={{
          backgroundColor: 'blue',
          width: '100%',
          height: '100%',
          transition: 'transform 660ms cubic-bezier(0.65, 0, 0.35, 1)',
          transform: `translateX(-${100 - (progress || 0)}%)`,
        }}
      />
    </Progress.Root>
  );
};

import * as Progress from '@radix-ui/react-progress';

export default () => (
  <Progress.Root
    value={null}
    style={{
      position: 'relative',
      overflow: 'hidden',
      background: 'lightgray',
      borderRadius: 99999,
      width: 300,
      height: 25,
    }}
  >
    <Progress.Indicator
      style={{
        backgroundColor: 'blue',
        width: '100%',
        height: '100%',
      }}
    />
  </Progress.Root>
);

import * as Progress from '@radix-ui/react-progress';

export default () => (
  <Progress.Root
    value={75}
    max={100}
    getValueLabel={(value, max) => `${value} out of ${max} complete`}
  >
    <Progress.Indicator />
  </Progress.Root>
);