How to edit the styling of the skeleton loader?

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:

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