ProgressBarWithFloatLabel

@coinbase/cds-web@8.34.1

A ProgressBar with a floating label that moves with progress.

Import

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

SourceView source code

---

Peer dependencies

• framer-motion: ^10.18.0

---

Related components

• ProgressBar,
• ProgressCircle,
• ProgressBarWithFixedLabels

---

󰏖

View as Markdown

Label Above

Loading...

󰙡

Live Code

<VStack gap={2}>
  <ProgressBarWithFloatLabel label={0} progress={0} labelPlacement="above">
    <ProgressBar progress={0} />
  </ProgressBarWithFloatLabel>
  <ProgressBarWithFloatLabel label={20} progress={0.2} labelPlacement="above">
    <ProgressBar progress={0.2} />
  </ProgressBarWithFloatLabel>
</VStack>

Label Below

Loading...

󰙡

Live Code

<VStack gap={2}>
  <ProgressBarWithFloatLabel label={0} progress={0} labelPlacement="below">
    <ProgressBar progress={0} />
  </ProgressBarWithFloatLabel>
  <ProgressBarWithFloatLabel label={20} progress={0.2} labelPlacement="below">
    <ProgressBar progress={0.2} />
  </ProgressBarWithFloatLabel>
</VStack>

Disabled

Loading...

󰙡

Live Code

<VStack gap={2}>
  <ProgressBarWithFloatLabel label={70} progress={0.7} disabled>
    <ProgressBar progress={0.7} disabled />
  </ProgressBarWithFloatLabel>
</VStack>

Custom Labels

Loading...

󰙡

Live Code

function Example() {
  const renderLabelNumStr = useCallback((num) => {
    return `$${num.toLocaleString()}`;
  }, []);

  const renderLabelNum = useCallback((num, disabled) => {
    return (
      <Text as="span" font="title3" disabled={disabled}>
        ${num.toLocaleString()}
      </Text>
    );
  }, []);

  return (
    <VStack gap={2}>
      <ProgressBarWithFloatLabel
        progress={0.6}
        label={{ value: 12500, render: renderLabelNumStr }}
        labelPlacement="above"
      >
        <ProgressBar progress={0.6} />
      </ProgressBarWithFloatLabel>
      <ProgressBarWithFloatLabel
        progress={0.6}
        label={{ value: 12500, render: renderLabelNum }}
        labelPlacement="above"
      >
        <ProgressBar progress={0.6} />
      </ProgressBarWithFloatLabel>
      <ProgressBarWithFloatLabel
        progress={0.6}
        label={{ value: 12500, render: renderLabelNumStr }}
        labelPlacement="above"
        disabled
      >
        <ProgressBar disabled progress={0.6} />
      </ProgressBarWithFloatLabel>
      <ProgressBarWithFloatLabel
        progress={0.6}
        label={{ value: 12500, render: renderLabelNum }}
        labelPlacement="above"
        disabled
      >
        <ProgressBar disabled progress={0.6} />
      </ProgressBarWithFloatLabel>
    </VStack>
  );
}

Custom Styles

You can customize the appearance of the progress bar and float label using the styles prop.

Loading...

󰙡

Live Code

<ProgressContainerWithButtons>
  {({ calculateProgress }) => (
    <VStack gap={2}>
      <ProgressBarWithFloatLabel
        label={Math.round(calculateProgress(0.4) * 100)}
        labelPlacement="above"
        progress={calculateProgress(0.4)}
        styles={{
          label: {
            color: 'var(--color-bgPrimary)',
            fontWeight: 'bold',
          },
        }}
      >
        <ProgressBar
          color="bgPrimary"
          progress={calculateProgress(0.4)}
          styles={{
            container: {
              height: 'var(--space-8)',
              borderRadius: 'var(--borderRadius-1000)',
            },
            progress: {
              borderRadius: 'var(--borderRadius-1000)',
            },
          }}
        />
      </ProgressBarWithFloatLabel>
    </VStack>
  )}
</ProgressContainerWithButtons>

Interactive Demo

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

Loading...

󰙡

Live Code

<ProgressContainerWithButtons>
  {({ calculateProgress }) => (
    <VStack gap={2}>
      <ProgressBarWithFloatLabel
        label={Math.round(calculateProgress(0) * 100)}
        progress={calculateProgress(0)}
        labelPlacement="above"
      >
        <ProgressBar progress={calculateProgress(0)} />
      </ProgressBarWithFloatLabel>
      <ProgressBarWithFloatLabel
        label={Math.round(calculateProgress(0.2) * 100)}
        progress={calculateProgress(0.2)}
        labelPlacement="above"
      >
        <ProgressBar progress={calculateProgress(0.2)} />
      </ProgressBarWithFloatLabel>
    </VStack>
  )}
</ProgressContainerWithButtons>