ProgressBar

@coinbase/cds-web@9.28.0

A visual indicator of completion progress.

import { ProgressBar } from '@coinbase/cds-web/visualizations/ProgressBar'

󰒨

Source

󰏖

Storybook

󰏖

View as Markdown

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• ProgressCircle,
• ProgressBarWithFloatLabel,
• ProgressBarWithFixedLabels

Default

Loading...

󰙡

Live Code

<VStack gap={2}>
  <ProgressBar progress={0} />
  <ProgressBar progress={0.5} />
  <ProgressBar progress={1} />
</VStack>

Weights

Loading...

󰙡

Live Code

<VStack gap={2}>
  <ProgressBar weight="thin" progress={0.3} />
  <ProgressBar weight="normal" progress={0.5} />
  <ProgressBar weight="semiheavy" progress={0.7} />
  <ProgressBar weight="heavy" progress={0.9} />
</VStack>

Disabled

Loading...

󰙡

Live Code

<VStack gap={2}>
  <ProgressBar disabled progress={0} />
  <ProgressBar disabled progress={0.5} />
  <ProgressBar disabled progress={1} />
</VStack>

Colors

Loading...

󰙡

Live Code

<VStack gap={2}>
  <ProgressBar color="bgPositive" progress={0.5} />
  <ProgressBar color="bgNegative" progress={0.5} />
  <ProgressBar color="bgPrimary" progress={0.5} />
  <ProgressBar color="bgWarning" progress={0.5} />
  <ProgressBar color="fg" progress={0.5} />
  <ProgressBar disabled color="fg" progress={0.5} />
</VStack>

Custom Styles

You can customize the appearance of the progress bar using the styles prop. The root style controls the container, and progress controls the fill bar.

Loading...

󰙡

Live Code

<VStack gap={2}>
  <ProgressBar
    progress={1}
    styles={{
      root: {
        background: 'transparent',
      },
      progress: {
        background: 'linear-gradient(to right, var(--color-bgPrimaryWash), var(--color-bgPrimary))',
      },
    }}
  />
  <ProgressBar
    progress={0.5}
    styles={{
      root: { height: 'var(--space-4)' },
    }}
  />
  <ProgressBar
    progress={0.3}
    styles={{
      root: {
        height: 'var(--space-8)',
        borderRadius: 'var(--borderRadius-1000)',
      },
      progress: {
        borderRadius: 'var(--borderRadius-1000)',
        background: 'linear-gradient(to right, rgb(var(--teal40)), rgb(var(--green40)))',
      },
    }}
  />
</VStack>

Interactive Demo

This is for demo purposes. ProgressContainerWithButtons isn't designed for production usage.

Loading...

󰙡

Live Code

<ProgressContainerWithButtons>
  {({ calculateProgress }) => (
    <VStack gap={2}>
      <ProgressBar progress={calculateProgress(0)} />
      <ProgressBar progress={calculateProgress(0.2)} />
    </VStack>
  )}
</ProgressContainerWithButtons>

Animation

By default, ProgressBar animates progress changes. Use disableAnimateOnMount to skip the initial animation while still animating subsequent changes.

Loading...

󰙡

Live Code

<ProgressContainerWithButtons>
  {({ calculateProgress }) => (
    <VStack gap={2}>
      <Text variant="label2">Normal animation</Text>
      <ProgressBar progress={calculateProgress(0)} />

      <Text variant="label2">Disable animation on mount</Text>
      <ProgressBar disableAnimateOnMount progress={calculateProgress(0.3)} />
    </VStack>
  )}
</ProgressContainerWithButtons>

Callbacks

You can use the onAnimationStart and onAnimationEnd callbacks to track the progress of the animation.

Loading...

󰙡

Live Code

function Example() {
  const [animationStatus, setAnimationStatus] = React.useState('Ready');

  const handleAnimationStart = useCallback(() => {
    setAnimationStatus('Animating...');
  }, []);

  const handleAnimationEnd = useCallback(() => {
    setAnimationStatus('Animation Ended');
  }, []);

  return (
    <ProgressContainerWithButtons>
      {({ calculateProgress }) => (
        <VStack gap={2}>
          <Text>Animation Status: {animationStatus}</Text>
          <ProgressBar
            onAnimationEnd={handleAnimationEnd}
            onAnimationStart={handleAnimationStart}
            progress={calculateProgress(0.2)}
          />
        </VStack>
      )}
    </ProgressContainerWithButtons>
  );
}