Progress

Open in Playground

Linear. variant="linear" (the default) draws a bar: value is 0-100, showValue prints the percentage beside the label and label goes above. Without a value the bar slides back and forth; size does not apply.

Loading bananas62%
Minions working

Circular. variant="circular" draws a ring instead of a bar: size is sm, md or lg, showValue prints the percentage in the middle and label goes underneath. Without a value the ring spins.

65%
Bananas
65%
Large
Minions working

Props

  • valuenumber

    0-100. Omit for an indeterminate bar or spinning ring.

  • labelstring

    Label and accessible name.

  • showValueboolean
    Default: false

    Show the percentage (beside the label, or inside the ring).

  • variant'linear' | 'circular'
    Default: 'linear'

    A bar or a ring.

  • size'sm' | 'md' | 'lg'
    Default: 'md'

    Ring size (32 / 64 / 96 px). Ignored by the linear bar.

  • classNamestring
    Default: ''

    Extra classes for the root element.