پیشرفت دایره‌ای (CircularProgress)

معرفی

کامپوننت CircularProgress برای نمایش مقدار درصدی به شکل یک حلقه دایره‌ای استفاده می‌شود. مناسب برای نمایش نرخ تعامل، درصد تکمیل، یا هر معیار ۰ تا ۱۰۰ است.

چه زمانی استفاده کنیم:

• برای نمایش درصد تکمیل در فضای مربعی یا دایره‌ای
• وقتی نمایش بصری حلقه‌ای مناسب‌تر از نوار خطی است
• برای نمایش یک مقدار درصدی برجسته (مثلاً نرخ تعامل، امتیاز)

چه زمانی استفاده نکنیم:

• برای مقادیر linear با مقایسه — از Progress استفاده کنید
• برای نمایش loading — از Spinner استفاده کنید

زمین بازی

با تغییر تنظیمات زیر، پیش‌نمایش زنده را مشاهده کنید.

import { CircularProgress } from '@parto-system-design/ui'

<CircularProgress />

استفاده

import { CircularProgress } from '@parto-system-design/ui'

export default function MyComponent() {
  return <CircularProgress value={72} variant="success" label="نرخ تعامل" />
}

انواع

رنگ‌بندی‌ها

از prop variant برای تنظیم رنگ حلقه پیشرفت استفاده کنید. شش حالت پشتیبانی می‌شود: primary، success، warning، destructive و دو حالت جدید info (آبی) و neutral (خاکستری).

اندازه‌ها

با تنظیم diameter می‌توانید اندازه دلخواه را انتخاب کنید.

Props

راهنمای استفاده

دسترسی‌پذیری

• از role="progressbar" و aria-valuenow، aria-valuemin، aria-valuemax پشتیبانی می‌کند
• در حالت RTL، جهت انیمیشن به درستی تنظیم می‌شود

کامپوننت‌های مرتبط

• Progress — اگر نمایش خطی مناسب‌تر است (مثلاً در فضای افقی)، از Progress استفاده کنید
• Spinner — اگر درصد مشخصی ندارید و فقط حالت بارگذاری می‌خواهید، از Spinner استفاده کنید