ProgressArc

Stable

Arc de progression animé à l'entrée viewport (IntersectionObserver) — 2 variantes : linéaire + radiale (jauge FIRE). Tokens-only, prefers-reduced-motion. Primitive générique.

import { ProgressArc } from "@lyra/tokens/components";

Playground

Variante linéaire

Barre de progression animée — cas d'usage : CELI / REER / CELIAPP / budget / épargne par paie. Animation déclenchée à l'entrée dans le viewport via IntersectionObserver.

CELI utilisé62 %

44 500 $ / 71 500 $

REER utilisé48 %

82 000 $ / 170 000 $

CELIAPP90 %

31 500 $ / 35 000 $

Budget — juin78 %

2 340 $ / 3 000 $

Épargne par paie55 %

11 000 $ / 20 000 $

Dette — carte15 %

450 $ / 3 000 $

Variante radiale

Arc demi-cercle animé — cas d'usage : jauge FIRE, objectifs patrimoine, taux d'épargne.

Indice FIRE

25× dépenses : 42 %

Autonomie patrimoine

Taux de couverture

Objectif REER

Horizon retraite

Taux d'épargne

22 % revenus nets

Variations strokeWidth + size (radiale)

80px / sw6

120px / sw10

160px / sw14

200px / sw18

prefers-reduced-motion activé → rendu direct à la valeur finale, zéro animation. Activer dans les préférences OS / navigateur pour tester.

Démo interactive — réglages du playground (props ajustables en direct) à venir.

<ProgressArc
  variant="radial"
  value={0.72}
  color="cyan"
  label="FIRE Progress"
  showValue
/>

Documentation

Aperçu unique — pas de variantes documentées.

variant, value, color, label, strokeWidth, size, showValue, animationDuration

<ProgressArc
  variant="radial"
  value={0.72}
  color="cyan"
  label="FIRE Progress"
  showValue
/>