My goal is to build a circular progress indicator.

I have come across library daisyui and its `radial progress` component - <https://daisyui.com/components/radial-progress/>

it says: "Radial progress needs --value CSS variable to work."

I have tried doing this:

```
      <div className="radial-progress" style={{ "--value": 70 }}>
        70%
      </div>

```

But, it's not working, am I doing something wrong?

This is what I want to achieve:

[![enter image description here](https://i.stack.imgur.com/pVGCm.png)](https://i.stack.imgur.com/pVGCm.png)

this is the codesandbox link: <https://codesandbox.io/s/react-tailwind-playground-forked-9jwc49?file=/src/App.tsx>