Tailwind CSS Radial Progress Bar

tailwind-radial-progress-bar.txt

// Inspired by Tailwind Daisy UI progress bar: https://daisyui.com/components/radial-progress/
// This is a custom-made progress circular/radial progress bar with centered percentage text.
// Tested with Tailwind 3.x. Should work with lower versions of Tailwind CSS as well.

STEP 1: Add the following custom CSS:

.progress-ring__circle {
  transition: stroke-dashoffset 0.35s;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

STEP 2: Build the SVG radial progress bar. 

Here, I have used 'text-indigo-500', you can change the ring color to any Tailwind CSS color of your choice.

Code Explanation:

- The circumference of a circle is calculated with C = 2πr 
- In this case, we assume a radius of 40 
- Therefore, calculation goes thus: C= 2 × π × 40; which gives approx 251.2 
- The stroke-dasharray takes the circumference value
- The progress difference is then calculated as such: circumference - ( circumference * currentProgress ) / 100  
- Use javascript or css to dynamically update the value "70" to your current progress, depending on your use case. 

<div class="relative w-40 h-40">
  <svg class="w-full h-full" viewBox="0 0 100 100">
    <!-- Background circle -->
    <circle
      class="text-gray-200 stroke-current"
      stroke-width="10"
      cx="50"
      cy="50"
      r="40"
      fill="transparent"
    ></circle>
    <!-- Progress circle -->
    <circle
      class="text-indigo-500  progress-ring__circle stroke-current"
      stroke-width="10"
      stroke-linecap="round"
      cx="50"
      cy="50"
      r="40"
      fill="transparent"
      stroke-dasharray="251.2" 
      stroke-dashoffset="calc(251.2 - (251.2 * 70) / 100)"
    ></circle>
    
    <!-- Center text -->
    <text x="50" y="50" font-family="Verdana" font-size="12" text-anchor="middle" alignment-baseline="middle">70%</text>

  </svg>
</div>


That's all! You should have a nice looking radial progress bar using Tailwind CSS now.

Demo: https://play.tailwindcss.com/peIWtNNDh2

Cheers :)

FYI, this does not work in FireFox.