G
Tokens
TypographySpacingColorRadiusShadowMotion
Patterns
CardsModals

Progress

Value


    () => {
      const [value, setValue] = React.useState(20);
      return (
        <Stack gap="m">
          <Box maxWidth="160px">
            <Slider
              value={value}
              onChange={(e) => setValue(parseInt(e.target.value))}
              min={0}
              max={100}
              step={1}
            />
          </Box>

          <Text>Value: {value}%</Text>

          <Progress value={value}/>
        </Stack>
      )
    }


Variants


    <Arrange gap="xl" columns="1fr 1fr">
      <Progress variant="determinate" value={75}/>
      <Progress variant="indeterminate"/>
    </Arrange>

Props

Name
Type
Default
max
number
100
variant
oneOf
'determinate' 'indeterminate'
'determinate'
value
number