Skip to content

Skeleton Loader

The Skeleton Loader component provides visual placeholders that mimic your content's layout during loading states. These animated placeholders improve perceived performance and reduce user frustration by indicating that content is loading.

Getting Started

Using AI

The quickest way to set up skeleton loaders is by using AI:

  1. First, think about which content areas you want to show loading states for
  2. Ask AI: "Create skeleton loaders for my user profile page" or "Add skeleton loaders to my product cards"
  3. Continue refining your skeleton loaders by asking AI for specific modifications:
    • "Make the skeleton loaders use the pulse animation"
    • "Create a skeleton layout for my article list with title and description"
    • "Add rounded corners to match my card design"
    • "Create a skeleton for a circular profile picture with two text lines"

Manual Setup

  1. Add a Skeleton Loader component to your page using the Add panel (search for "skeleton" or "loader")
  2. Style the component to match the dimensions and shape of your content (width, height, border radius)
  3. Choose an animation type that matches your design aesthetic

Animation Types

The Skeleton Loader component offers three animation types via the Animation Type property:

  1. Wave - A subtle highlight that moves from left to right across the element
Wave Animation
  1. Pulse - A gentle fading in and out effect
Pulse Animation

WARNING

The pulse animation requires you to set a background color on the Skeleton Loader for it to appear correctly.

  1. Shimmer - A light reflection that sweeps across the element
Shimmer Animation

Styling Your Skeleton Loader

For the Skeleton Loader to be effective, it's essential to style it properly using the standard styling properties. Here are the key properties to consider:

Essential Styling Properties

PropertyDescription
WidthSet the width to match your content (can be fixed or responsive)
HeightSet the height to match your content
Background ColorChoose a light gray color that contrasts with your background (e.g., #E0E0E0)
PositionIn most cases, you will want the position to be Absolute so that it covers the desired content

WARNING

Without a proper width, height and background color set, your Skeleton Loader may not be visible.

Covering Existing Content

To create a loading state that covers existing content (like product images or cards that are already rendered):

  1. Place the Skeleton Loader in the same container as the elements you want to cover
  2. Give the Skeleton Loader a position of Absolute, with a top position of 0 and left position of 0
  3. Set the width and height of the Skeleton Loader to 100% to fully cover the content
  4. Set the z-axis value of the Skeleton Loader to be higher than the contents you want to cover

What these positioning properties do:

PropertyWhat it does
Position: AbsoluteThis means the element (in this case the Skeleton Loader) ignores the position of the other elements in the container and positions itself relative to the container
Top: 0, Left: 0Anchors the element to the top-left corner of the container
Width/Height: 100%Makes the element expand to fill the entire width and height of the container
Z-axisControls stacking order - the higher the value, the higher the element will be in the visual stack

Skeleton loader covering content

TIP

If your container has a border radius and the Skeleton Loader does not seem to match it, then ensure either your container's overflow is set to hidden, or your Skeleton Loader also has the same border radius set as the container.

Conditionally Showing Skeleton Loaders

To show Skeleton Loaders only during loading states:

  1. Create a boolean variable (e.g., isLoading) to use for controlling the display

Creating Display Var

  1. Bind the Skeleton Loader's display to this variable

Bind Display

  1. Set up logic to appropriately change the value of this variable when needed

Logic To Control Display

Once everything is set up, the Skeleton Loader will display only during loading, like this:

Conditional display setup

Usage Examples

Text Content Loader

To create a placeholder for text content:

  1. Place the Skeleton Loader in a container with the text element
  2. Give the Skeleton Loader a position of Absolute, with a top position of 0 and left position of 0
  3. Set the width and height of the Skeleton Loader to 100% to fully cover the text
  4. Set the z-axis value of the Skeleton Loader to be higher than that of the text element

Skeleton loader text example

Card Loader

To create a placeholder for multiple elements in a card:

  1. Place the Skeleton Loader in a container with one of the desired elements to cover
  2. Give the Skeleton Loader a position of Absolute, with a top position of 0 and left position of 0
  3. Set the width and height of the Skeleton Loader to 100% to fully cover the text
  4. Set the z-axis value of the Skeleton Loader to be higher than that of the card or image
  5. Duplicate the Skeleton Loader and place in containers with all needed elements

Skeleton loader card example

TIP

You can easily create a container for an element by pressing ⌘ + G with the element selected in the editor. This is useful if you need the element to be in a container so you can place a Skeleton Loader alongside it. Grouping Command Shortcut

Best Practices

Do:

  • Match the skeleton's dimensions and shape to your actual content
  • Use subtle, consistent animations across your interface
  • Group related skeleton elements to mirror your content structure
  • Display skeletons immediately when loading begins

Don't:

  • Use bright or high-contrast colors for skeleton elements
  • Mix different animation types in the same loading context
  • Make animations too fast or distracting
  • Keep skeletons visible for too long (aim for <2 seconds when possible)

Common Use Cases

  • Article or blog post loading screens
  • Product card loading in e-commerce
  • Social media feed item placeholders
  • Profile information loading
  • Form field placeholders during data retrieval
  • Dashboard widget loading states

Forking

While the Skeleton Loader component offers flexibility through its animation types and styling options, there may be cases where you need functionality beyond what's natively available. In these situations, you can fork the component and modify it to meet your specific requirements.

If you are unsure how to fork an element, you can learn more in the dedicated documentation.

Forking Example: Custom Animation Type

One common reason to fork the Skeleton Loader is to create a specialized animation type not available in the standard component. For example, you might want to create a "Bounce" animation that adds a subtle up-and-down movement.

Here's how you can use AI to help with this process:

Modify this forked Skeleton Loader to add a 'Bounce' animation type that adds a subtle vertical movement effect

Forking Example: Changing Animation Speed

Another useful customization is having the ability to control the speed of the animation.

Here's an example prompt for this:

Update this forked Skeleton Loader to add a property for controlling the animation speed

Properties

Settings

PropertyOptionsDescription
Animation TypeWave, Pulse, ShimmerChoose the style of loading animation