-
-
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.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.
Great code but can you explain how you did the calculations for stroke-dashoffset