---
title: "How to edit the styling of the skeleton loader?"
description: "Change how the blurry boxes look that precede each page & cart items being loaded"
url: https://help.cartgenie.com/en/articles/169-how-to-edit-the-styling-of-the-skeleton-loader
collection: "Store Pages FAQ"
updated: 2025-12-05
language: en
---

# How to edit the styling of the skeleton loader?

Change how the blurry boxes look that precede each page & cart items being loaded

To style the skeleton loader, you will need to just add some code to your site and target this class: **.cg-skeleton**

We recommend doing this by going to your Webflow project settings > Custom Code and adding:

```javascript
<style>
  .cg-skeleton {
    background-image: linear-gradient(
      90deg,
      #f3f4f6 25%,
      #f9fafb,
      #f3f4f6 75%
    ) !important;
  }
</style>
```

This is the default styling, so you can start with this and then modify as needed to match your site colors.

This CSS creates a gradient between 3 different colors to give it more of a dynamic feel instead of a flat color. If you want to only use a flat color you will need to set background-image to “none” before you can set a background-color style.