ProgressBar · ProgressRing

Ελεγχόμενες μπάρες και δακτύλιοι προόδου με απροσδιόριστη κατάσταση.

WebReact NativeΠρόοδος

Δοκιμάστε το

Προετοιμασία παραδείγματος…

Η JavaScript είναι απενεργοποιημένη. Ο κώδικας παρακάτω είναι το πλήρες παράδειγμα.

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

Η πιο σύντομη χρήση

Upload.jsx

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

Τι αναλαμβάνει για εσάς

Οι τιμές περιορίζονται σε 0…max και το null δείχνει απροσδιόριστη σάρωση ή περιστρεφόμενο τόξο.
Μια νέα τιμή στη μέση της κίνησης συνεχίζει με την ταχύτητά της.
Μία συνεχής γραμμή ή τόξο, ποτέ τμήματα που πηδούν.
Ένα ελατήριο με duration τελειώνει ακριβώς σε εκείνον τον χρόνο.

Χρησιμοποιήστε το για

Μεταφόρτωση αρχείου.
Χώρος που χρησιμοποιήθηκε από ένα όριο.
Πρόοδος στην ολοκλήρωση αγοράς.

Props

`ProgressBar`

Prop	Τύπος	Προεπιλογή	Περιγραφή
`value`	`number \| null`		Πρόοδος από `0` έως `max`· το `null` είναι απροσδιόριστο.
`max`	`number`	`100`	Η τιμή που σημαίνει ολοκλήρωση.
`color`	`string`	`'currentColor'`	Χρώμα γεμίσματος.
`trackColor`	`string`	`'#e7ece9'`	Χρώμα τροχιάς.
`thickness`	`number`	`8`	Πάχος γραμμής σε pixels.
`direction`	`'ltr' \| 'rtl'`	`'ltr'`	Γέμισμα από αριστερά (`ltr`) ή από δεξιά (`rtl`).
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

`ProgressRing`

Prop	Τύπος	Προεπιλογή	Περιγραφή
`value`	`number \| null`		Πρόοδος από `0` έως `max`· το `null` είναι απροσδιόριστο.
`max`	`number`	`100`	Η τιμή που σημαίνει ολοκλήρωση.
`size`	`number`	`96`	Διάμετρος σε pixels.
`thickness`	`number`	`8`	Πάχος δακτυλίου σε pixels.
`color`	`string`	`'currentColor'`	Χρώμα τόξου.
`trackColor`	`string`	`'#e7ece9'`	Χρώμα τροχιάς.
`children`	`ReactNode`		Ετικέτα που εμφανίζεται στο κέντρο.
`transition`	`Transition`	`spring`	Μια καμπύλη timing `{ duration, easing }` ή ένα ελατήριο `{ tempo: 'spring', spring }`. Τα ελατήρια κρατούν την ορμή τους όταν διακόπτονται.

Τα υπόλοιπα props πηγαίνουν στο στοιχείο που αποδίδεται, οπότε τα className, style και οι χειριστές συμβάντων λειτουργούν κανονικά.

Web και React Native

Το ProgressRing δέχεται παιδιά για ετικέτα στο κέντρο· το ProgressBar δέχεται direction για γέμισμα από τα δεξιά.

Τα ίδια components και props λειτουργούν στο React Native.