> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# التغذية الراجعة

يشير إلى تقدم أو عد تنازلي ويتحرك من اليمين إلى اليسار.

<Tabs>
  <Tab title="استخدام">
    ```jsx theme={null}
    import { ProgressBar } from "twenty-ui/feedback";

    export const MyComponent = () => {
      return (
        <ProgressBar
          duration={6000}
          delay={0}
          easing="easeInOut"
          barHeight={10}
          barColor="#4bb543"
          autoStart={true}
        />
      );
    };
    ```
  </Tab>

  <Tab title="المحددات">
    | المحددات         | النوع       | الوصف                                                                           | الإعداد الافتراضي |
    | ---------------- | ----------- | ------------------------------------------------------------------------------- | ----------------- |
    | المدة            | رقم         | إجمالي مدة الرسوم المتحركة لشريط التقدم بالميلي ثانية                           | 3                 |
    | التأخير          | رقم         | التأخير في بدء الرسوم المتحركة لشريط التقدم بالميلي ثانية                       | 0                 |
    | التخفيف          | نص          | وظيفة التخفيف للرسوم المتحركة لشريط التقدم                                      | easeInOut         |
    | ارتفاع الشريط    | رقم         | ارتفاع الشريط بالبكسل                                                           | 24                |
    | لون الشريط       | نص          | لون الشريط                                                                      | gray80            |
    | التشغيل التلقائي | قيمة منطقية | إذا كان `true`، فإن الرسوم المتحركة لشريط التقدم تبدأ تلقائيًا عند تحميل المكون | `صحيح`            |
  </Tab>
</Tabs>

## شريط التقدم الدائري

يشير إلى تقدم المهمة، ويستخدم غالباً في شاشات التحميل أو الأماكن التي ترغب فيها في إبلاغ العمليات الجارية إلى المستخدم.

<Tabs>
  <Tab title="استخدام">
    ```jsx theme={null}
    import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";

    export const MyComponent = () => {
      return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
    };
    ```
  </Tab>

  <Tab title="الخصائص">
    | الخصائص    | النوع | الوصف                   | الإعداد الافتراضي |
    | ---------- | ----- | ----------------------- | ----------------- |
    | الحجم      | رقم   | حجم شريط التقدم الدائري | 50                |
    | عرض الشريط | رقم   | عرض خط شريط التقدم      | 5                 |
    | لون الشريط | نص    | لون شريط التقدم         | currentColor      |
  </Tab>
</Tabs>