How to Create a Radial Progress Bar with TailwindCSS

Building a radial progress bar with TailwindCSS can seem challenging without a prebuilt component. However, with some custom styles and Tailwind classes, it's straightforward. This guide explains how to create a radial progress bar step-by-step without relying on external libraries like DaisyUI.

Why TailwindCSS for Radial Progress Bars?

TailwindCSS offers powerful utilities that allow developers to create highly customizable components without bloat. By leveraging Tailwind's utility classes and a little custom CSS, you can achieve an elegant and functional radial progress bar.

Code Example

Here's how to build a radial progress bar using TailwindCSS:

HTML & CSS Implementation

<style>
  .progress-ring__circle {
    transition: stroke-dashoffset 0.35s;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
  }
</style>

<div class="relative h-40 w-40">
  <svg class="h-full w-full" viewBox="0 0 100 100">
    <!-- Background Circle -->
    <circle
      class="stroke-current text-gray-200"
      stroke-width="10"
      cx="50"
      cy="50"
      r="40"
      fill="transparent"
    ></circle>
    <!-- Progress Circle -->
    <circle
      class="progress-ring__circle stroke-current text-indigo-500"
      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>

Explanation

Background Circle: The static circle represents the full progress bar.
Progress Circle: The stroke-dasharray defines the total circumference, and stroke-dashoffset calculates the progress dynamically.
Center Text: Displays the progress percentage.

Dynamic Example

For dynamic progress, you can integrate this component with JavaScript or a framework like Phoenix LiveView:

<div class="relative h-40 w-40">
  <svg class="h-full w-full" viewBox="0 0 100 100">
    <circle
      class="stroke-current text-gray-200"
      stroke-width="10"
      cx="50"
      cy="50"
      r="40"
      fill="transparent"
    ></circle>
    <circle
      class="progress-ring__circle stroke-current text-indigo-500"
      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 * ${progress}) / 100)`"
    ></circle>
    <text
      x="50"
      y="50"
      font-family="Verdana"
      font-size="12"
      text-anchor="middle"
      alignment-baseline="middle"
    >
      {{ progress }}%
    </text>
  </svg>
</div>

Bind the progress variable to dynamically update the bar in frameworks like Vue, React, or Phoenix LiveView.

FAQs

1. What is `stroke-dasharray` and `stroke-dashoffset`?

stroke-dasharray specifies the total circumference of the circle.
stroke-dashoffset determines how much of the circle is visible, representing the progress.

2. Why rotate the circle by `-90deg`?

SVG circles start from the right by default. Rotating by -90deg aligns the starting point to the top for a more intuitive progress direction.

3. Can I add animations?

Yes! Use CSS transitions, as shown in the .progress-ring__circle class, to animate the progress bar smoothly.