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



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

A grey loading placeholder block. Use it to reserve the space of content that is still loading,
for example a product image or a line of text. Give it a `width` and `height`, and use `type="circle"` for avatars.

## Use it [#use-it]

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

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

## Try it [#try-it]

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

## Example [#example]

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

export function Example() {
  return (
    <>
      <SallaSkeleton width="200px" height="16px" />
      <SallaSkeleton type="circle" width="48px" height="48px" />
    </>
  );
}
```

```html
<salla-skeleton width="200px" height="16px"></salla-skeleton>
<salla-skeleton type="circle" width="48px" height="48px"></salla-skeleton>
```

## Properties [#properties]

| Property | Attribute | Description                                                                                                    | Type                   | Default    |
| -------- | --------- | -------------------------------------------------------------------------------------------------------------- | ---------------------- | ---------- |
| `height` | `height`  | Height of the skeleton as a CSS length, for example `16px` or `4rem`.                                          | `string`               | `'100%'`   |
| `type`   | `type`    | Shape of the skeleton: `normal` (rectangle) or `circle`. For a true circle, use the same `width` and `height`. | `"circle" \| "normal"` | `'normal'` |
| `width`  | `width`   | Width of the skeleton as a CSS length, for example `100px`, `50%` or `10rem`.                                  | `string`               | `'100%'`   |

## Related [#related]

Used inside: [`<salla-basket-gap>`](https://docs.salla.dev/twilight/react/web-components/salla-basket-gap), [`<salla-bought-together>`](https://docs.salla.dev/twilight/react/web-components/salla-bought-together), [`<salla-bullet-delivery>`](https://docs.salla.dev/twilight/react/web-components/salla-bullet-delivery), [`<salla-cart-summary-card>`](https://docs.salla.dev/twilight/react/web-components/salla-cart-summary-card), [`<salla-conditional-offer>`](https://docs.salla.dev/twilight/react/web-components/salla-conditional-offer), [`<salla-delivery-promise>`](https://docs.salla.dev/twilight/react/web-components/salla-delivery-promise), [`<salla-gifting>`](https://docs.salla.dev/twilight/react/web-components/salla-gifting), [`<salla-localization-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-localization-modal), [`<salla-loyalty>`](https://docs.salla.dev/twilight/react/web-components/salla-loyalty), [`<salla-multiple-bundle-product-options-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-multiple-bundle-product-options-modal), [`<salla-next-order-coupon>`](https://docs.salla.dev/twilight/react/web-components/salla-next-order-coupon), [`<salla-offer-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-offer-modal), [`<salla-orders>`](https://docs.salla.dev/twilight/react/web-components/salla-orders), [`<salla-product-size-guide>`](https://docs.salla.dev/twilight/react/web-components/salla-product-size-guide), [`<salla-rating-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal), [`<salla-rating-modal-v2>`](https://docs.salla.dev/twilight/react/web-components/salla-rating-modal-v2), [`<salla-scopes>`](https://docs.salla.dev/twilight/react/web-components/salla-scopes), [`<salla-tiered-offer>`](https://docs.salla.dev/twilight/react/web-components/salla-tiered-offer), [`<salla-user-profile>`](https://docs.salla.dev/twilight/react/web-components/salla-user-profile).