Passer au contenu principal
Frutjam logo Frutjam
v2.2.2
Theme

Radial Progress Component

CSS-only Tailwind CSS radial progress — circular progress ring with percentage display. Color and size variants, no JavaScript. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

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-progressBaseIndicateur de progression circulaire piloté par --radial-progress--value
radial-progress-xsTailleTrès petit
radial-progress-smTaillePetit
radial-progress-mdTailleMoyen (par défaut)
radial-progress-lgTailleGrand
radial-progress-xlTailleTrès grand
radial-progress-baseCouleurCouleur de la surface de base atténuée
radial-progress-currentCouleurHérite explicitement de la couleur actuelle du texte
radial-progress-primaryCouleurCouleur du thème principal
radial-progress-secondaryCouleurCouleur du thème secondaire
radial-progress-accentCouleurCouleur du thème d'accentuation
radial-progress-neutralCouleurCouleur du thème neutre
radial-progress-infoCouleurCouleur sémantique de l'information
radial-progress-successCouleurCouleur sémantique du succès
radial-progress-warningCouleurCouleur sémantique d’avertissement
radial-progress-errorCouleurCouleur sémantique des erreurs

Utilisation de base

70%
<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

70%
70%
70%
70%
70%
html 
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

70%
70%
70%
70%
70%
70%
70%
70%
70%
html 
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

85%

Tasks Completed

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