Trying to create circular progress using custom tailwind css library, but its not working

Question

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:

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

Defining the variable in a style attribute in JSX might be your issue. See: https://stackoverflow.com/questions/52005083/how-to-define-css-variables-in-style-attribute-in-react-and-typescript — Ed Lucas, Feb 18 '22 at 00:53

score 1 · Answer 1 · answered Mar 07 '22 at 02:32

1

This worked for me.

const style = { "--value": 70 } as React.CSSProperties

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

answered Mar 07 '22 at 02:32

なかがわはじめ

11
1

score 0 · Answer 2 · answered Feb 17 '22 at 11:13

0

We package called react-circular-progressbar in react js we can use this to achieve your requirements.

(or)

we have multiple packages are there for circular progress bar you can choose which one is suited for you.

answered Feb 17 '22 at 11:13

nagendra nag

1,142
2
15

it's 72.5 kB in size, would that affect performance in general as opposed to just creating custom css? – Ripas55 Feb 17 '22 at 11:17
2

refer https://codepen.io/juhaelee/pen/GxymWP for custom circular progress bar – nagendra nag Feb 17 '22 at 11:33

score 0 · Answer 3 · answered Oct 09 '22 at 10:40

I recently came across this issue with typescript. I just added a global.d.ts file to the root folder of my project and use module augmentation to fix the issue

//global.d.ts
import React from "react";

declare module "react" {
  interface CSSProperties {
    "--value"?: string | number;
    "--size"?: string | number;
    "--thickness"?: string | number;
  }
}

Trying to create circular progress using custom tailwind css library, but its not working

3 Answers3