-
-
Save eYinka/873be69fae3ef27b103681b8a9f5e379 to your computer and use it in GitHub Desktop.
// 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.2px - (251.2px * 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/53s5OjCLix | |
Cheers :) |
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.
Great find @SkyNotBlueEnough
I'd update the code. Thank you!
I made a react component for this, with dynamic calculations here https://gist.github.com/maxotuteye/86dc828106847c471a0abbb11a631550
Cool stuff! @maxotuteye
Thanks @eYinka the explanation makes sense but the result does not display 45%, it does display 70% of the progress as your text indicates.