مؤشّر التحميل
مؤشر بصري لحالات التحميل. يتوفّر بثلاثة أنماط — خط بسيط وغزّال خطّي وغزّال شعاعي — وخمسة أحجام ولونَي محايد أو أساسي.
Loading demo: loading-indicator-real-world
التثبيت
npx sdaia-ui@latest add loading-indicator
الاستخدام
import { LoadingIndicator } from "@/components/ui/loading-indicator"<LoadingIndicator style="line-spinner" size="medium" />الأمثلة
خط بسيط
خط متحرك بسيط للإشارة إلى تقدّم التحميل.
Loading demo: loading-indicator-line-simple
غزّال خطّي
غزّال خطّي دوّار لحالات التحميل المفتوحة.
Loading demo: loading-indicator-line-spinner
غزّال شعاعي
غزّال شعاعي دائري لحالات التحميل.
Loading demo: loading-indicator-radial-spinner
الأحجام
مؤشر التحميل بأحجام صغير جداً وصغير ومتوسط وكبير وكبير جداً.
Loading demo: loading-indicator-sizes
الألوان
مؤشر التحميل بلونَي محايد وأساسي.
Loading demo: loading-indicator-colors
مرجع الواجهة البرمجية
LoadingIndicatorProps
خصائص مكوّن LoadingIndicator.
Prop | Type | Default | Required |
|---|---|---|---|
indicatorStyle | 'arc' | 'ring' | 'radial' | 'arc' | optional |
color | 'neutral' | 'primary' | 'neutral' | optional |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xs' | optional |
showLabel | boolean | true | optional |
supportingText | boolean | deprecated | optional |
label | ReactNode | 'Loading...' | optional |