Complex usage example

import React from 'react';
import { Box } from '@semcore/ui/flex-box';
import { Text } from '@semcore/ui/typography';
import ProgressBar from '@semcore/ui/progress-bar';

const maxValue = 2000;

const Demo = () => {
  const [value, setValue] = React.useState(0);

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

  return (
    <div>
      <Box mb={1}>
        <Text size={200}>{value ? `${value}/${maxValue}` : 'Starting...'}</Text>
      </Box>
      <ProgressBar
        tabIndex={0}
        value={(value / maxValue) * 100}
        aria-valuetext={`${value} of ${maxValue}`}
        aria-label='Infinite emails processing'
      />
    </div>
  );
};

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 React from 'react';
import ProgressBar from '@semcore/ui/progress-bar';

const Demo = () => {
  return (
    <ProgressBar tabIndex={0} value={80} theme='violet-100' aria-label='Email processing'>
      <ProgressBar.Value theme='violet-500' />
    </ProgressBar>
  );
};

export default Demo;