Basic usage

import { Flex } from '@semcore/ui/base-components';
import Button from '@semcore/ui/button';
import ProgressBar from '@semcore/ui/progress-bar';
import { Text } from '@semcore/ui/typography';
import React from 'react';

const maxValue = 2000;

const Demo = () => {
  const barRef = React.useRef<HTMLDivElement | null>(null);
  const [value, setValue] = React.useState(0);

  const restart = () => {
    setValue(0);
    barRef.current?.focus();
  };

  React.useEffect(() => {
    if (value < maxValue) {
      const timerFetch = setInterval(() => {
        setValue((value) => value + 400);
      }, 2000);
      return () => {
        clearInterval(timerFetch);
      };
    }
  }, [value]);

  return (
    <Flex gap={2} direction='column' alignItems='start'>
      <Text size={200}>{value ? `${value}/${maxValue}` : 'Starting...'}</Text>
      <ProgressBar
        tabIndex={0}
        value={(value / maxValue) * 100}
        aria-valuetext={`${value} of ${maxValue}`}
        aria-label='Basic ProgressBar example'
        ref={barRef}
      />
      <Button onClick={restart} mt={2}>
        Restart progress
      </Button>
    </Flex>
  );
};

export default Demo;

Customizing the bar

By default, you should use <ProgressBar/>. However, you can customize progress bar appearance using the theme property and the ProgressBar.Value component.

import ProgressBar from '@semcore/ui/progress-bar';
import type { ProgressBarProps } from '@semcore/ui/progress-bar';
import React from 'react';

type ProgressBarExampleProps = ProgressBarProps;
const Demo = (props: ProgressBarExampleProps) => {
  return (
    <ProgressBar tabIndex={0} value={props.value} size={props.size} theme={props.theme} aria-label='Custom theme example' duration={props.duration}>
      <ProgressBar.Value theme='violet-500' />
    </ProgressBar>
  );
};

export const defaultProps: ProgressBarExampleProps = {
  size: 'm',
  value: 80,
  theme: 'violet-100',
  duration: undefined,
};

Demo.defaultProps = defaultProps;

export default Demo;