# salla-loading (https://docs.salla.dev/twilight/react/web-components/salla-loading)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A small animated spinner (an SVG ring) to show that something is loading.
It is centered inside its own box; set its size with the `size` prop.
The SVG is hidden from assistive technology (`aria-hidden`), so add your own text or `aria-busy` if the loading state must be announced.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-loading>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaLoading } from '@salla.sa/twilight-components-react/loading';
```

## Try it [#try-it]

<Demo name="web-components/salla-loading" />

## Example [#example]

```tsx
import { SallaLoading } from '@salla.sa/twilight-components-react/loading';

export function Example() {
  return (
    <SallaLoading size="24" color="#ff0000" />
  );
}
```

```html
<salla-loading size="24" color="#ff0000"></salla-loading>
```

## Properties [#properties]

| Property  | Attribute  | Description                                                                                                                                                     | Type               | Default     |
| --------- | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
| `bgColor` | `bg-color` | Color of the spinner's background ring, as any CSS color value. Defaults to `#e5e7eb`.                                                                          | `string`           | `"#e5e7eb"` |
| `color`   | `color`    | Fill color of the spinner, as any CSS color value. When not set, the color comes from the `--color-primary` CSS variable.                                       | `string`           | `undefined` |
| `size`    | `size`     | Sets the width and height of the spinner in pixels. A plain number or numeric string, for example `24`. Defaults to `32`.                                       | `number \| string` | `32`        |
| `width`   | `width`    | Sets the stroke of the circle (border) in pixels. **Deprecated:** Not read by the component, so it has no effect. It will be removed in the next major version. | `number \| string` | `2`         |

## Related [#related]

Used inside: [`<salla-bottom-alert>`](https://docs.salla.dev/twilight/react/web-components/salla-bottom-alert), [`<salla-comments>`](https://docs.salla.dev/twilight/react/web-components/salla-comments), [`<salla-drawer>`](https://docs.salla.dev/twilight/react/web-components/salla-drawer), [`<salla-file-upload>`](https://docs.salla.dev/twilight/react/web-components/salla-file-upload), [`<salla-loyalty-panel>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-panel), [`<salla-loyalty-points-history>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty-points-history), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-offer>`](https://docs.salla.dev/twilight/react/web-components/salla-offer), [`<salla-order-edit>`](https://docs.salla.dev/twilight/react/web-components/salla-order-edit), [`<salla-user-menu>`](https://docs.salla.dev/twilight/react/web-components/salla-user-menu).