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 :)

@RS-Roshi Okay ideally, the stroke-dashoffset calculation is a way to dynamically adjust how much of the stroke is visible based on the progress percentage you want to display.

Key things here:

• Remember that 400 is the total length of the dash pattern (as defined in stroke-dasharray CSS above).
• (400 * 45) / 100 calculates 45% of the dash pattern. This is the progress percentage you want to show. The percentage is hardcoded as 45%. This means 45% of the circle will be shown as "filled" or "progressed".
• Subtracting this value from the total length of the dasharray (400 - (400 * 45) / 100) gives us the stroke-dashoffset. This kinds of shifts the start of the dash pattern inwardly by the calculated amount; giving us the desired progress.
• Note that the remaining stroke (the part of the 400 units not covered by the stroke-dashoffset) will be invisible, showing the background circle beneath.

Hopefully that makes some sense. Essentially, you want to update the 45% to whatever progress figure you wish to use.

Thanks @eYinka the explanation makes sense but the result does not display 45%, it does display 70% of the progress as your text indicates.

Just like @loisgomez said, the calculation gives more like 75% ( not 45% )

Apologies guys! I messed up my calculations. The circumference of the circle didn't match my explanation, hence, the value inaccuracy. I have edited the code to fit and get it all giddy! Also added explanatory comments and new demo link :)

Good spot @RS-Roshi @loisgomez @zharzone

FYI, this does not work in FireFox.

Doesn't work with Firefox and Safari because of missing units in the stroke-dashoffset calculation.

stroke-dashoffset="calc(251.2px - (251.2px * 30) / 100)"

This works fine on FireFox.

https://stackoverflow.com/questions/65849051/calc-not-working-with-stroke-dashoffset-in-safari-and-firefox