ProgressBar · ProgressRing

פסים וטבעות התקדמות מבוקרים עם מצב לא מוגדר.

אינטרנטReact 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`	עובי הקו בפיקסלים.
`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`	קוטר בפיקסלים.
`thickness`	`number`	`8`	עובי הטבעת בפיקסלים.
`color`	`string`	`'currentColor'`	צבע הקשת.
`trackColor`	`string`	`'#e7ece9'`	צבע המסילה.
`children`	`ReactNode`		תווית שמוצגת באמצע.
`transition`	`Transition`	`spring`	עקומת timing `{ duration, easing }` או קפיץ `{ tempo: 'spring', spring }`. קפיצים שומרים על התנופה שלהם כשמפריעים להם.

props אחרים עוברים לאלמנט המרונדר, כך ש־className, style ומטפלי אירועים עובדים כרגיל.

אינטרנט ו־React Native

ProgressRing מקבל ילדים לתווית באמצע; ProgressBar מקבל direction כדי להתמלא מימין.

אותם רכיבים ואותם props עובדים ב־React Native.