Skip to content

Instantly share code, notes, and snippets.

@eYinka
eYinka / tailwind-radial-progress-bar.txt
Last active November 7, 2024 08:54
Tailwind CSS Radial Progress Bar
// 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%;