---
title: "Radial Progress"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "CSS-only Tailwind CSS Radial Progress for circular indicators. Custom sizes, stroke widths, and colors for dashboards, metrics, and performance displays."
url: https://frutjam.com/components/radial-progress
---

# Radial Progress Component

 Radial progress components display completion percentage in a circular format, offering an elegant alternative to linear progress bars. Built with SVG-based visualization and CSS animations, radial progress adds visual interest to dashboards and status indicators. The Frutjam radial progress system supports multiple sizes and colors—ideal for metrics, completion tracking, and data visualization.

| Class                     | Type  | Description                                                      |
| ------------------------- | ----- | ---------------------------------------------------------------- |
| radial-progress           | Base  | Circular progress indicator driven by `--radial-progress--value` |
| radial-progress-xs        | Size  | Extra small                                                      |
| radial-progress-sm        | Size  | Small                                                            |
| radial-progress-md        | Size  | Medium (default)                                                 |
| radial-progress-lg        | Size  | Large                                                            |
| radial-progress-xl        | Size  | Extra large                                                      |
| radial-progress-base      | Color | Muted base surface color                                         |
| radial-progress-current   | Color | Explicitly inherits the current text color                       |
| radial-progress-primary   | Color | Primary theme color                                              |
| radial-progress-secondary | Color | Secondary theme color                                            |
| radial-progress-accent    | Color | Accent theme color                                               |
| radial-progress-neutral   | Color | Neutral theme color                                              |
| radial-progress-info      | Color | Info semantic color                                              |
| radial-progress-success   | Color | Success semantic color                                           |
| radial-progress-warning   | Color | Warning semantic color                                           |
| radial-progress-error     | Color | Error semantic color                                             |

## Basic Usage

## Radial Progress Sizes

```html
<div class="radial-progress radial-progress-xs" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-sm" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-md" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-lg" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-xl" style="--radial-progress--value:70">70%</div>
```


## Radial Progress Colors

```html
<div class="radial-progress radial-progress-base" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-primary" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-secondary" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-accent" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-neutral" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-info" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-success" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-warning" style="--radial-progress--value:70">70%</div>
<div class="radial-progress radial-progress-error" style="--radial-progress--value:70">70%</div>
```


## Radial Progress with Label

```html
<div class="flex flex-col items-center gap-4">
  <div class="text-center">
    <div class="radial-progress radial-progress-xl radial-progress-primary" style="--radial-progress--value:85">85%</div>
    <p class="text-sm mt-2">Tasks Completed</p>
  </div>
</div>
```