---
title: "Radial Progress"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/fr/components/radial-progress
---

# Radial Progress Component

Les composants de progression radiale affichent le pourcentage d'achèvement dans un format circulaire, offrant une alternative élégante aux barres de progression linéaires. Construit avec une visualisation basée sur SVG et des animations CSS, la progression radiale ajoute un intérêt visuel aux tableaux de bord et aux indicateurs d'état. Le système de progression radiale Frutjam prend en charge plusieurs tailles et couleurs, idéal pour les mesures, le suivi de l'achèvement et la visualisation des données.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe                    | Taper   | Description                                                                |
| ------------------------- | ------- | -------------------------------------------------------------------------- |
| radial-progress           | Base    | Indicateur de progression circulaire piloté par `--radial-progress--value` |
| radial-progress-xs        | Taille  | Très petit                                                                 |
| radial-progress-sm        | Taille  | Petit                                                                      |
| radial-progress-md        | Taille  | Moyen (par défaut)                                                         |
| radial-progress-lg        | Taille  | Grand                                                                      |
| radial-progress-xl        | Taille  | Très grand                                                                 |
| radial-progress-base      | Couleur | Couleur de la surface de base atténuée                                     |
| radial-progress-current   | Couleur | Hérite explicitement de la couleur actuelle du texte                       |
| radial-progress-primary   | Couleur | Couleur du thème principal                                                 |
| radial-progress-secondary | Couleur | Couleur du thème secondaire                                                |
| radial-progress-accent    | Couleur | Couleur du thème d'accentuation                                            |
| radial-progress-neutral   | Couleur | Couleur du thème neutre                                                    |
| radial-progress-info      | Couleur | Couleur sémantique de l'information                                        |
| radial-progress-success   | Couleur | Couleur sémantique du succès                                               |
| radial-progress-warning   | Couleur | Couleur sémantique d’avertissement                                         |
| radial-progress-error     | Couleur | Couleur sémantique des erreurs                                             |

## Utilisation de base

## Tailles de progression radiale

```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>
```

## Couleurs de progression radiale

```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>
```

## Progrès Radial avec Étiquette

```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>
```