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

![Default skeleton loader style](https://mintcdn.com/qonto-6237c309/Nf1DUTOWWrc5aHiD/partnerships/embed/sdk/img/default-skeleton-loader-styles.png?fit=max\&auto=format\&n=Nf1DUTOWWrc5aHiD\&q=85\&s=df5e2d8822be6391410a80c0e3d772a6)

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

> [!NOTE]
>
> 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.

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

![Customized skeleton loader style](https://mintcdn.com/qonto-6237c309/Nf1DUTOWWrc5aHiD/partnerships/embed/sdk/img/skeleton-loader-customized.png?fit=max\&auto=format\&n=Nf1DUTOWWrc5aHiD\&q=85\&s=864eae10af127059dd626f258f43f616)