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

import { FC } from 'react'

interface Props {
  strokeWidth?: number
  sqSize?: number
  percentage: number
}

const CircularProgressBar: FC<Props> = (props) => {
  const { strokeWidth = 8, sqSize = 160, percentage } = props
  const radius = (sqSize - strokeWidth) / 2
  const viewBox = `0 0 ${sqSize} ${sqSize}`
  const dashArray = radius * Math.PI * 2
  const dashOffset = dashArray - (dashArray * (percentage || 0)) / 100
  const statusMessage = `${percentage}%`

  return (
    <svg width={sqSize} height={sqSize} viewBox={viewBox}>
      <circle
        className="fill-none stroke-gray-200"
        cx={sqSize / 2}
        cy={sqSize / 2}
        r={radius}
        strokeWidth={`${strokeWidth}px`}
      />
      <circle
        className="fill-none stroke-violet-600 transition-all delay-200 ease-in"
        cx={sqSize / 2}
        cy={sqSize / 2}
        r={radius}
        strokeLinecap="round"
        strokeWidth={`${strokeWidth}px`}
        transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}
        style={{
          strokeDasharray: dashArray,
          strokeDashoffset: dashOffset,
        }}
      />
      <text
        x="50%"
        y="50%"
        dy=".3em"
        textAnchor="middle"
        color="red"
        fill="#172554"
        className="text-3xl font-semibold"
      >
        {statusMessage}
      </text>
    </svg>
  )
}

export default CircularProgressBar
Copy

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.

import { useState } from 'react'
import CircularProgressBar from './components/CircularProgressBar'

function App() {
  const [progress, setProgress] = useState(0)

  const onChangeProgress = () => {
    setProgress((prev) => prev + 20)
  }

  return (
    <div className="mx-20 my-20">
      <CircularProgressBar sqSize={180} strokeWidth={8} percentage={progress} />
      <button
        onClick={onChangeProgress}
        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"
      >
        Update Progress
      </button>
    </div>
  )
}

export default App
Copy

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