How to add the gradient to Chakra UI Progress?

user_14949109 0
Viewed 1828

I am trying to set the gradient to the Progress component of Chakra UI, but it doesn't support background image change. Any idea how I can achieve this or is it even possible?

chakra-ui
2 Answers

I ran into this recently and used the sx prop to style the actual div for the Progress bar.

<Progress
  height="24px"
  borderRadius="2xl"
  value={60}
  sx={{
    '& > div': {
      background: 'linear-gradient(90deg, rgba(43,108,176,1) 10%, rgba(66,153,225,1) 90%)',
    },
  }}
/>
user_72736570 
<Progress
   bgGradient="linear(gray.300,yellow.400,pink.200)"
/>
user_149610870
Related