Skip to content

Instantly share code, notes, and snippets.

@eYinka

eYinka/tailwind-radial-progress-bar.txt

Last active April 5, 2025 13:09
Download ZIP

Revisions

  1. eYinka revised this gist Jun 22, 2024. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions tailwind-radial-progress-bar.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -44,7 +44,7 @@ Code Explanation:
    r="40"
    fill="transparent"
    stroke-dasharray="251.2"
    stroke-dashoffset="calc(251.2 - (251.2 * 70) / 100)"
    stroke-dashoffset="calc(251.2px - (251.2px * 70) / 100)"
    ></circle>

    <!-- Center text -->
    @@ -56,6 +56,6 @@ Code Explanation:

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

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

    Cheers :)
  2. eYinka revised this gist Apr 12, 2024. 1 changed file with 12 additions and 4 deletions.
    16 changes: 12 additions & 4 deletions tailwind-radial-progress-bar.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,6 @@
    STEP 1: Add the following custom CSS:

    .progress-ring__circle {
    stroke-dasharray: 400, 400;
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    @@ -15,13 +14,21 @@ 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"
    @@ -36,7 +43,8 @@ Here, I have used 'text-indigo-500', you can change the ring color to any Tailwi
    cy="50"
    r="40"
    fill="transparent"
    stroke-dashoffset="calc(400 - (400 * 45) / 100)"
    stroke-dasharray="251.2"
    stroke-dashoffset="calc(251.2 - (251.2 * 70) / 100)"
    ></circle>

    <!-- Center text -->
    @@ -48,6 +56,6 @@ Here, I have used 'text-indigo-500', you can change the ring color to any Tailwi

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

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

    Cheers :)
  3. eYinka renamed this gist Sep 5, 2023. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions gistfile1.txt → tailwind-radial-progress-bar.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -48,4 +48,6 @@ Here, I have used 'text-indigo-500', you can change the ring color to any Tailwi

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

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

    Cheers :)
  4. eYinka created this gist Sep 5, 2023.
    51 changes: 51 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    // 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 {
    stroke-dasharray: 400, 400;
    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.

    <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-dashoffset="calc(400 - (400 * 45) / 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.

    Cheers :)