ProgressBar · ProgressRing

Bare și inele de progres controlate, cu stare nedeterminată.

WebReact NativeProgres

Încercați

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul 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;
}

Cea mai scurtă utilizare

Upload.jsx

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

Ce rezolvă în locul dumneavoastră

Valorile sunt limitate la 0…max, iar null arată o baleiere nedeterminată sau un arc care se rotește.
O valoare nouă în mijlocul unei mișcări continuă cu viteza ei.
O singură linie sau un singur arc continuu, niciodată segmente care sar.
Un arc cu duration se încheie exact în acel moment.

Folosiți-o pentru

O încărcare de fișier.
Spațiul de stocare folosit dintr-o cotă.
Progresul prin finalizarea comenzii.

Props

`ProgressBar`

Prop	Tip	Implicit	Descriere
`value`	`number \| null`		Progres de la `0` la `max`; `null` înseamnă nedeterminat.
`max`	`number`	`100`	Valoarea care înseamnă încheiat.
`color`	`string`	`'currentColor'`	Culoarea umplerii.
`trackColor`	`string`	`'#e7ece9'`	Culoarea pistei.
`thickness`	`number`	`8`	Grosimea liniei, în pixeli.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Umple de la stânga (`ltr`) sau de la dreapta (`rtl`).
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

`ProgressRing`

Prop	Tip	Implicit	Descriere
`value`	`number \| null`		Progres de la `0` la `max`; `null` înseamnă nedeterminat.
`max`	`number`	`100`	Valoarea care înseamnă încheiat.
`size`	`number`	`96`	Diametrul, în pixeli.
`thickness`	`number`	`8`	Grosimea inelului, în pixeli.
`color`	`string`	`'currentColor'`	Culoarea arcului.
`trackColor`	`string`	`'#e7ece9'`	Culoarea pistei.
`children`	`ReactNode`		O etichetă afișată în centru.
`transition`	`Transition`	`spring`	O curbă timing `{ duration, easing }` sau un arc `{ tempo: 'spring', spring }`. Arcurile își păstrează impulsul când sunt întrerupte.

Celelalte props merg la elementul randat, așa că className, style și handlerele de evenimente funcționează ca de obicei.

Web și React Native

ProgressRing primește copii pentru o etichetă în centru; ProgressBar primește direction pentru a umple de la dreapta.

Aceleași componente și props funcționează în React Native.