Skip to content

ProgressBar

Complex usage example

tsx
import React from 'react';
import { Box } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
import ProgressBar from 'intergalactic/progress-bar';

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

  React.useEffect(() => {
    const timerFetch = setInterval(() => {
      setValue((value) => {
        if (value < 100) {
          return value + 20;
        }
        return 0;
      });
    }, 1000);
    return () => {
      clearInterval(timerFetch);
    };
  }, []);

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

export default Demo;
import React from 'react';
import { Box } from 'intergalactic/flex-box';
import { Text } from 'intergalactic/typography';
import ProgressBar from 'intergalactic/progress-bar';

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

  React.useEffect(() => {
    const timerFetch = setInterval(() => {
      setValue((value) => {
        if (value < 100) {
          return value + 20;
        }
        return 0;
      });
    }, 1000);
    return () => {
      clearInterval(timerFetch);
    };
  }, []);

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

export default Demo;

Customizing the bar

By default, you should use <ProgressBar/>. However, if you need to customize the progress bar using the ProgressBar.Value element, you can achieve it in the following manner:

tsx
import React from 'react';
import ProgressBar from 'intergalactic/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;
import React from 'react';
import ProgressBar from 'intergalactic/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;

Released under the MIT License.

Released under the MIT License.