Progression radiale CSS Tailwind uniquement en CSS - anneau de progression circulaire avec affichage en pourcentage. Variantes de couleur et de taille, pas de JavaScript. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.
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
<div class="radial-progress" style="--radial-progress--value:70">70%</div> |
1 2 3 4 | function RadialProgress() { const progress = {"--radial-progress--value": 70} return <div className="radial-progress" style={progress}>70%</div> } |
Tailles de progression radiale
1 2 3 4 5 | <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
1 2 3 4 5 6 7 8 9 | <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
Tasks Completed
1 2 3 4 5 6 | <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> |
Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?
Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Progrès Radial sur demande. Fini les cours hallucinés.