ProgressBar · ProgressRing

Valdomos eigos juostos ir žiedai su neapibrėžta būsena.

ŽiniatinklisReact NativeEiga

Išbandykite

Ruošiamas pavyzdys…

JavaScript išjungtas. Žemiau esantis kodas yra visas pavyzdys.

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;
}

Trumpiausias naudojimas

Upload.jsx

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

Ką jis sutvarko už jus

Reikšmės apribojamos iki 0…max, o null rodo neapibrėžtą perbraukimą arba besisukantį lanką.
Nauja reikšmė judesio viduryje tęsiasi su savo greičiu.
Viena ištisinė linija ar lankas, niekada šokinėjantys segmentai.
Spyruoklė su duration baigiasi tiksliai tuo metu.

Naudokite jį

Failo įkėlimas.
Panaudota saugyklos vieta iš kvotos.
Eiga atsiskaitant.

Props

`ProgressBar`

Prop	Tipas	Numatytoji	Aprašymas
`value`	`number \| null`		Eiga nuo `0` iki `max`; `null` reiškia neapibrėžtą.
`max`	`number`	`100`	Reikšmė, reiškianti užbaigta.
`color`	`string`	`'currentColor'`	Užpildo spalva.
`trackColor`	`string`	`'#e7ece9'`	Takelio spalva.
`thickness`	`number`	`8`	Linijos storis pikseliais.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Pildoma iš kairės (`ltr`) arba iš dešinės (`rtl`).
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

`ProgressRing`

Prop	Tipas	Numatytoji	Aprašymas
`value`	`number \| null`		Eiga nuo `0` iki `max`; `null` reiškia neapibrėžtą.
`max`	`number`	`100`	Reikšmė, reiškianti užbaigta.
`size`	`number`	`96`	Skersmuo pikseliais.
`thickness`	`number`	`8`	Žiedo storis pikseliais.
`color`	`string`	`'currentColor'`	Lanko spalva.
`trackColor`	`string`	`'#e7ece9'`	Takelio spalva.
`children`	`ReactNode`		Centre rodoma etiketė.
`transition`	`Transition`	`spring`	Timing kreivė `{ duration, easing }` arba spyruoklė `{ tempo: 'spring', spring }`. Pertrauktos spyruoklės išlaiko inerciją.

Kiti props perduodami atvaizduojamam elementui, todėl className, style ir įvykių apdorojimo funkcijos veikia kaip įprastai.

Žiniatinklis ir React Native

ProgressRing priima vaikus etiketei centre; ProgressBar priima direction, kad būtų pildoma iš dešinės.

Tie patys komponentai ir props veikia React Native.