Skip to main content
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

​
Customization Options

The Skeleton Loader can be customized using the following CSS variables:
CSS VariableDescription & Accepted Values
--qonto-embed-skeleton-border-radiusAccepts any valid border-radius value (e.g., 4px, 50%, 8px). Controls the border radius of the skeleton line.
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 colors and border radius: 
:root {
  --qonto-embed-skeleton-border-radius: 8px;
}
The result is a skeleton loader with rounded corners and a lighter color palette, as shown below: Customized skeleton loader style