Create a Custom Circular Progress Bar with React and Tailwind CSS

Graphs and charts offer the most visually appealing and effective ways of presenting data, and the Circular Progress Bar is a modern and engaging way to represent progress.

In this document, you'll get a customizable Circular Progress Bar component made with React and Tailwind CSS, helping you enhance your UI with minimal effort.

Circular Progress Bar UI

React and Tailwind CSS Circular Progress Bar Component

This Circular Progress Bar component is built with React and styled using Tailwind CSS. It allows for easy customization with three key props:

1. strokeWidth: thickness of the bar stroke.
2. sqSize: specifies the diameter of the circle.
3. percentage: the progress percentage, determine how much to fill.

Feel free to modify these props to fit your specific needs.

Component Code

Copy
1import { FC } from 'react'
2
3interface Props {
4  strokeWidth?: number
5  sqSize?: number
6  percentage: number
7}
8
9const CircularProgressBar: FC<Props> = (props) => {
10  const { strokeWidth = 8, sqSize = 160, percentage } = props
11  const radius = (sqSize - strokeWidth) / 2
12  const viewBox = `0 0 ${sqSize} ${sqSize}`
13  const dashArray = radius * Math.PI * 2
14  const dashOffset = dashArray - (dashArray * (percentage || 0)) / 100
15  const statusMessage = `${percentage}%`
16
17  return (
18    <svg width={sqSize} height={sqSize} viewBox={viewBox}>
19      <circle
20        className="fill-none stroke-gray-200"
21        cx={sqSize / 2}
22        cy={sqSize / 2}
23        r={radius}
24        strokeWidth={`${strokeWidth}px`}
25      />
26      <circle
27        className="fill-none stroke-violet-600 transition-all delay-200 ease-in"
28        cx={sqSize / 2}
29        cy={sqSize / 2}
30        r={radius}
31        strokeLinecap="round"
32        strokeWidth={`${strokeWidth}px`}
33        transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}
34        style={{
35          strokeDasharray: dashArray,
36          strokeDashoffset: dashOffset,
37        }}
38      />
39      <text
40        x="50%"
41        y="50%"
42        dy=".3em"
43        textAnchor="middle"
44        color="red"
45        fill="#172554"
46        className="text-3xl font-semibold"
47      >
48        {statusMessage}
49      </text>
50    </svg>
51  )
52}
53
54export default CircularProgressBar

How to Implement the Circular Progress Bar Component

To test the component, I've created an onChangeProgress method, which will update the progress to 20% on each click.

Copy
1import { useState } from 'react'
2import CircularProgressBar from './components/CircularProgressBar'
3
4function App() {
5  const [progress, setProgress] = useState(0)
6
7  const onChangeProgress = () => {
8    setProgress((prev) => prev + 20)
9  }
10
11  return (
12    <div className="mx-20 my-20">
13      <CircularProgressBar sqSize={180} strokeWidth={8} percentage={progress} />
14      <button
15        onClick={onChangeProgress}
16        className="mt-4 min-w-[140px] rounded-lg border border-neutral-800 bg-transparent px-2 py-1 text-neutral-800 hover:border-gray-200 hover:bg-gray-200"
17      >
18        Update Progress
19      </button>
20    </div>
21  )
22}
23
24export default App

If you find this guide helpful, please let me know your thoughts. Your feedback encourages me to create more useful components for the community.