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

# Skeleton Loader

A skeleton loader is a placeholder UI element that displays a loading animation while
content is being fetched from the server. It provides visual feedback to users, indicating
that data is loading, by showing a shimmer animation on skeleton lines that match the shape
of the content being loaded.

## Default Styling

By default, the Skeleton Loader uses Qonto's branding:

<img src="https://mintcdn.com/qonto-6237c309/f-CA-wd5TNKm_ycF/api-reference/sdk-libraries/doc-pages/img/default-skeleton-loader-styles.png?fit=max&auto=format&n=f-CA-wd5TNKm_ycF&q=85&s=02ebfffb101288f1736998d13226d792" alt="Default skeleton loader style" width="670" height="86" data-path="api-reference/sdk-libraries/doc-pages/img/default-skeleton-loader-styles.png" />

## Customization Options

The Skeleton Loader can be customized using the following CSS variables:

| CSS Variable                           | Description & Accepted Values                                                                                       |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `--qonto-embed-skeleton-border-radius` | Accepts any valid border-radius value (e.g., `4px`, `50%`, `8px`). Controls the border radius of the skeleton line. |

<Info>
  There are some aspects of the loader skeleton that can't be customized. For
  example, it uses a shimmer animation and shows a neutral color (grayscale)
  that are designed to work well in most of the scenarios.
</Info>

### Example

This example shows a customized Skeleton Loader with different border radius:

```css theme={null}
:root {
  --qonto-embed-skeleton-border-radius: 8px;
}
```

The result is a skeleton loader with less rounded corners, as shown below:

<img src="https://mintcdn.com/qonto-6237c309/f-CA-wd5TNKm_ycF/api-reference/sdk-libraries/doc-pages/img/skeleton-loader-customized.png?fit=max&auto=format&n=f-CA-wd5TNKm_ycF&q=85&s=eda8c5e3d67ee56691024d598d11a1de" alt="Customized skeleton loader style" width="285" height="50" data-path="api-reference/sdk-libraries/doc-pages/img/skeleton-loader-customized.png" />
