ProgressBar · ProgressRing

Des barres et des anneaux de progression contrôlés, avec un état indéterminé.

WebReact NativeProgression

Essayer

Préparation de l’exemple…

JavaScript est désactivé. Le code ci-dessous est l’exemple complet.

App.jsx

import { useEffect, useState } from 'react';
import {
  MotionNumber,
  ProgressBar,
  ProgressRing,
  motionTokens,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

export default function App({ indeterminate = false, thickness = 8, spring = 'default' }) {
  const [progress, setProgress] = useState(35);
  const [uploading, setUploading] = useState(false);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];
  const value = indeterminate ? null : progress;

  // A pretend upload: a new value every 350 ms until it reaches 100.
  useEffect(() => {
    if (!uploading) return;
    if (progress >= 100) {
      setUploading(false);
      return;
    }
    const timer = setTimeout(() => setProgress(Math.min(100, progress + 7 + (progress % 5))), 350);
    return () => clearTimeout(timer);
  }, [uploading, progress]);

  return (
    <div className="stage">
      <div className="ring">
        <ProgressRing
          value={value}
          size={120}
          thickness={thickness}
          color="#176b52"
          trackColor="#eaf6f0"
          transition={transition}
        >
          <strong>{indeterminate ? '…' : <MotionNumber value={progress} suffix="%" />}</strong>
        </ProgressRing>
      </div>
      <ProgressBar
        className="bar"
        value={value}
        thickness={thickness}
        color="#176b52"
        trackColor="#eaf6f0"
        transition={transition}
      />
      <div className="buttons">
        <button
          className="primary"
          onClick={() => {
            setProgress(0);
            setUploading(true);
          }}
        >
          Start upload
        </button>
        <button onClick={() => setProgress(Math.min(100, progress + 10))}>+10%</button>
        <button onClick={() => setProgress(Math.max(0, progress - 25))}>−25%</button>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  justify-items: center;
  gap: 22px;
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 20px;
}

.ring strong {
  font:
    800 24px system-ui,
    sans-serif;
  font-variant-numeric: tabular-nums;
  color: #0e2e24;
}

.bar {
  width: 100%;
  border-radius: 999px;
  overflow: hidden;
}

.buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.buttons button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.buttons .primary {
  border-color: #176b52;
  background: #176b52;
  color: #fff;
}

Usage minimal

Upload.jsx

<ProgressBar value={progress} max={100} />
<ProgressRing value={progress} size={96}>{progress}%</ProgressRing>
<ProgressBar value={null} /> {/* indeterminate */}

Ce qu’il gère pour vous

Les valeurs sont limitées à 0…max, et null affiche un balayage indéterminé ou un arc qui tourne.
Une nouvelle valeur en plein mouvement continue avec sa vitesse.
Une ligne ou un arc continu, jamais des segments qui sautent.
Un ressort avec duration se termine exactement à ce moment-là.

À utiliser pour

L’envoi d’un fichier.
L’espace de stockage utilisé sur un quota.
La progression d’un paiement.

Props

`ProgressBar`

Prop	Type	Défaut	Description
`value`	`number \| null`		Progression de `0` à `max` ; `null` est indéterminé.
`max`	`number`	`100`	La valeur qui signifie terminé.
`color`	`string`	`'currentColor'`	Couleur du remplissage.
`trackColor`	`string`	`'#e7ece9'`	Couleur de la piste.
`thickness`	`number`	`8`	Épaisseur de la ligne, en pixels.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Remplir depuis la gauche (`ltr`) ou depuis la droite (`rtl`).
`transition`	`Transition`	`spring`	Une courbe de temps `{ duration, easing }` ou un ressort `{ tempo: 'spring', spring }`. Les ressorts gardent leur élan quand ils sont interrompus.

`ProgressRing`

Prop	Type	Défaut	Description
`value`	`number \| null`		Progression de `0` à `max` ; `null` est indéterminé.
`max`	`number`	`100`	La valeur qui signifie terminé.
`size`	`number`	`96`	Diamètre, en pixels.
`thickness`	`number`	`8`	Épaisseur de l’anneau, en pixels.
`color`	`string`	`'currentColor'`	Couleur de l’arc.
`trackColor`	`string`	`'#e7ece9'`	Couleur de la piste.
`children`	`ReactNode`		Une étiquette affichée au centre.
`transition`	`Transition`	`spring`	Une courbe de temps `{ duration, easing }` ou un ressort `{ tempo: 'spring', spring }`. Les ressorts gardent leur élan quand ils sont interrompus.

Les autres props vont à l’élément rendu : className, style et les gestionnaires d’événements fonctionnent comme d’habitude.

Web et React Native

ProgressRing accepte des enfants pour une étiquette au centre ; ProgressBar accepte direction pour se remplir depuis la droite.

Les mêmes composants et props fonctionnent sur React Native.