> ## 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.

# المحمّل

> اعرض مؤشر تحميل متحركًا ومضغوطًا بجانب تسمية حالة.

## نظرة عامة

يعرض `Loader` نقطة متحركة داخل كبسولة صغيرة ذات حدود. استخدمه أثناء تنفيذ عملية وعندما تكون النسبة المئوية غير معروفة. للتقدم الرقمي، استخدم [شريط التقدم](https://docs.twenty.com/ar/ui/primitives/feedback/progress-bar.md).

**Light**

[مثال على المحمّل (light)](https://storybook.twenty.com/iframe.html?id=ui-feedback-loader--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[مثال على المحمّل (dark)](https://storybook.twenty.com/iframe.html?id=ui-feedback-loader--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-feedback-loader--display)

## استخدام

```tsx theme={null}
import { Loader } from 'twenty-ui/primitives/feedback';
import { Text } from 'twenty-ui/primitives/typography';

type SaveFeedbackProps = { isSaving: boolean };

export const SaveFeedback = ({ isSaving }: SaveFeedbackProps) => (
  <Text
    render={<div />}
    role="status"
    style={{ display: 'flex', alignItems: 'center', gap: 8 }}
  >
    {isSaving && <Loader color="blue" aria-hidden="true" render={<span />} />}
    {isSaving ? 'Saving changes' : 'Changes saved'}
  </Text>
);
```

ضع نص حالة مرئيًا بجانب أداة التحميل ضمن غلاف. أداة التحميل مؤشر مرئي ثابت الحجم ولا تقبل عناصر فرعية.

يمتلك التطبيق حالة التحميل. أبقِ غلاف الحالة مركّبًا لكي يمكن الإعلان عن تحديثات النص. لا يعيّن المُحمِّل تسمية أو دور منطقة حية افتراضيًا. استخدم `aria-hidden="true"` عندما يوفّر النص المحيط أو الزر ملاحظات التحميل بالفعل.

## التركيب والتسمية الأصليان

تستهدف الخصائص الأصلية و`className` و`style` و`ref` عنصر div الحاوية. يقبل `render` عنصرًا أو دالة رد نداء عبر تركيب Base UI. تتجاوز الأنماط إعدادات اللون الافتراضية. يتم تصدير `LoaderProps` من عائلة الملاحظات.

للحصول على مؤشر مستقل، وفّر دور حالة صريحًا واسمًا متاحًا. تظل النقطة المتحركة زخرفية.

```tsx theme={null}
import { Loader, type LoaderProps } from 'twenty-ui/primitives/feedback';

const loadingProps: LoaderProps = {
  role: 'status',
  'aria-label': 'Loading results',
  color: 'blue',
};

export const LoadingResults = () => (
  <Loader {...loadingProps} render={<span />} />
);
```

استخدم `aria-labelledby` بدلًا من ذلك عندما يحدد النص المرئي اسم الحالة. أبقِ مالك المنطقة الحية مُثبّتًا عندما يحتاج إلى الإعلان عن نص متغير. يتحكم التطبيق في وقت ظهور الملاحظات وما تقوله.

## اللون

مرّر لونًا من لوحة ألوان النسق لتعيين كلٍّ من الحد والنقطة. من دون لون، يرث المحمّل لون الزر المحيط عند توفره، وإلا فيستخدم لون النص الثالثي. لإجراء زر، يُفضّل استخدام [حالة تحميل الزر](https://docs.twenty.com/ar/ui/primitives/input/button.md#state-ownership)، التي تُبقي الملاحظات داخل عنصر التحكم.

## الإزاحة

**aria-hidden** `Booleanish`

Hide a decorative loader when another element supplies loading feedback.

**aria-label** `string`

Accessible name for a labeled loader status.

**aria-labelledby** `string`

ID of text that names the loader status.

**className** `string`

CSS class merged with the loader container class.

**color** `"amber" | "blue" | "bronze" | "brown" | "crimson" | "cyan" | "gold" | "grass" | "gray" | "green" | "iris" | "jade" | "lime" | "mint" | "orange" | "pink" | "plum" | "purple" | "red" | "ruby" | "sky" | "tomato" | "turquoise" | "violet" | "yellow"`

Theme color for the animated dot and border. When omitted, inherits the button color if available, otherwise the tertiary text color.

**ref** `Ref\<HTMLDivElement\>`

Ref to the container div, or the element supplied through render.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Element or render callback composed through Base UI useRender.

**role** `AriaRole`

Supply status to expose loading feedback as a live region. No role is assigned by default.

**style** `CSSProperties`

Native styles merged with the loader color defaults. Explicit styles win.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.