ProgressBar · ProgressRing

Ohjatut edistymispalkit ja -renkaat määrittämättömällä tilalla.

WebReact NativeEdistyminen

Kokeile

Valmistellaan esimerkkiä…

JavaScript on pois päältä. Alla oleva koodi on koko esimerkki.

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

Lyhin käyttö

Upload.jsx

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

Mitä se hoitaa puolestasi

Arvot rajataan välille 0…max, ja null näyttää määrittämättömän pyyhkäisyn tai pyörivän kaaren.
Kesken liikkeen tuleva uusi arvo jatkaa nopeudellaan.
Yksi yhtenäinen viiva tai kaari, ei koskaan hyppiviä segmenttejä.
duration-arvollinen jousi päättyy tarkalleen sillä hetkellä.

Käytä sitä

Tiedoston lähetys.
Käytetty tallennustila kiintiöstä.
Kassan vaiheiden edistyminen.

Props

`ProgressBar`

Prop	Tyyppi	Oletus	Kuvaus
`value`	`number \| null`		Edistyminen väliltä `0`–`max`; `null` on määrittämätön.
`max`	`number`	`100`	Arvo, joka tarkoittaa valmista.
`color`	`string`	`'currentColor'`	Täytön väri.
`trackColor`	`string`	`'#e7ece9'`	Raidan väri.
`thickness`	`number`	`8`	Viivan paksuus pikseleinä.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Täyttö vasemmalta (`ltr`) tai oikealta (`rtl`).
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

`ProgressRing`

Prop	Tyyppi	Oletus	Kuvaus
`value`	`number \| null`		Edistyminen väliltä `0`–`max`; `null` on määrittämätön.
`max`	`number`	`100`	Arvo, joka tarkoittaa valmista.
`size`	`number`	`96`	Halkaisija pikseleinä.
`thickness`	`number`	`8`	Renkaan paksuus pikseleinä.
`color`	`string`	`'currentColor'`	Kaaren väri.
`trackColor`	`string`	`'#e7ece9'`	Raidan väri.
`children`	`ReactNode`		Keskellä näytettävä nimike.
`transition`	`Transition`	`spring`	Timing-käyrä `{ duration, easing }` tai jousi `{ tempo: 'spring', spring }`. Jouset säilyttävät liikemääränsä keskeytettäessä.

Muut props-arvot menevät renderöidylle elementille, joten className, style ja tapahtumankäsittelijät toimivat tavalliseen tapaan.

Web ja React Native

ProgressRing ottaa lapsia keskellä olevaa nimikettä varten; ProgressBar ottaa direction-arvon täyttämiseen oikealta.

Samat komponentit ja props-arvot toimivat React Nativessa.