← All Scripts

#23 - Skeleton Screens / Content Loaders v0.1

Easily add these industry-standard loading states to your site in just a few seconds.

Need help with this MemberScript?

All Memberstack customers can ask for assistance in the 2.0 Slack. Please note that these are not official features and support cannot be guaranteed.

View demo

Light mode

Use this on a white background


<!-- 💙 MEMBERSCRIPT #23 v0.1 💙 SKELETON SCREENS/CONTENT LOADERS -->
<script>
window.addEventListener("DOMContentLoaded", (event) => {
  const skeletonElements = document.querySelectorAll('[ms-code-skeleton]');
  
  skeletonElements.forEach(element => {
    // Create a skeleton div
    const skeletonDiv = document.createElement('div');
    skeletonDiv.classList.add('skeleton-loader');

    // Add the skeleton div to the current element
    element.style.position = 'relative';
    element.appendChild(skeletonDiv);

    // Get delay from the attribute
    let delay = element.getAttribute('ms-code-skeleton');

    // If attribute value is not a number, set default delay as 2000ms
    if (isNaN(delay)) {
      delay = 2000;
    }

    setTimeout(() => {
      // Remove the skeleton loader div after delay
      const skeletonDiv = element.querySelector('.skeleton-loader');
      element.removeChild(skeletonDiv);
    }, delay);
  });
});
</script>
<style>
.skeleton-loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: inherit; /* Inherit the border-radius of the parent element */
  background: linear-gradient(to right, #f6f7f8 25%, #e0e0e0 50%, #f6f7f8 75%);
  background-size: 200% 100%;  /* Increase the size of the background image */
  z-index: 1; /* Make sure the skeleton loader is on top of the content */
  animation: skeleton 1s infinite linear;
}

@keyframes skeleton {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

[ms-code-skeleton] {
  background-clip: padding-box;
}
</style>

Dark mode

Use this on a black background


<!-- 💙 MEMBERSCRIPT #23 v0.1 💙 SKELETON SCREENS/CONTENT LOADERS -->
<script>
window.addEventListener("DOMContentLoaded", (event) => {
  const skeletonElements = document.querySelectorAll('[ms-code-skeleton]');
  
  skeletonElements.forEach(element => {
    // Create a skeleton div
    const skeletonDiv = document.createElement('div');
    skeletonDiv.classList.add('skeleton-loader');

    // Add the skeleton div to the current element
    element.style.position = 'relative';
    element.appendChild(skeletonDiv);

    // Get delay from the attribute
    let delay = element.getAttribute('ms-code-skeleton');

    // If attribute value is not a number, set default delay as 2000ms
    if (isNaN(delay)) {
      delay = 2000;
    }

    setTimeout(() => {
      // Remove the skeleton loader div after delay
      const skeletonDiv = element.querySelector('.skeleton-loader');
      element.removeChild(skeletonDiv);
    }, delay);
  });
});
</script>
<style>
.skeleton-loader {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: inherit;
  background: linear-gradient(to right, #222222 25%, #333333 50%, #222222 75%); /* Updated background colors */
  background-size: 200% 100%;
  z-index: 1;
  animation: skeleton 1s infinite linear;
}

@keyframes skeleton {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

[ms-code-skeleton] {
  background-clip: padding-box;
}
</style>
Description
Attribute
No items found.

Creating the Make.com Scenario

1. Download the JSON blueprint below to get stated.

2. Navigate to Make.com and Create a New Scenario...

3. Click the small box with 3 dots and then Import Blueprint...

4. Upload your file and voila! You're ready to link your own accounts.

How to optimize the loading experience on your Webflow site

Memberscripts needed

  1. https://www.memberstack.com/scripts/23-skeleton-screens-content-loaders

Tutorial

Cloneable

https://webflow.com/made-in-webflow/website/skeleton-screens

Why/When would need to use Optimized Loading Experience?

  1. Keep visitors more engaged until everything loads.
  2. Improve the loading experience by making load times seem shorter.

Fast loading times are essential to keeping your bounce rate as low as possible. Sometimes, however, the illusion of speed is enough to keep people from leaving your site before it loads.

Enter skeleton screens, or content loaders – visual ways of informing visitors that your content is loading, keeping them around for longer. This method is proven to make the waiting time feel shorter than it actually is.

Skeleton screens work by offering a visual indicator that something is loading and this keeps visitors a bit more engaged for that extra second or two that’s needed for some elements to load.

You probably won’t want to use these on static elements that load instantly since there’s no real purpose to that. However, you will likely benefit from using these on web app related elements which have a bit of a loading time.

The point behind all this is to optimize the loading experience as much as possible and ensure that visitors aren’t bouncing before your content loads.

Adding content loaders to your Webflow site

In order to set this up, we’re going to use MemberScript #23 – Skeleton Screens / Content Loaders. Follow the link to get the code you’ll need to add to your page and watch a video tutorial on how to set everything up.

Setting up the loading animations

This step is fairly simple – all you need to do is choose which elements you want to display loading animations for and add this attribute to them: ms-code-skeleton=”VALUE”.

For the value, you need to add the time in milliseconds that the animation will play for. For example, a value of 1000 will display the animation for 1000 milliseconds, or one second.

Ensuring everything looks good

The loading animation is essentially an overlay that takes up the height of the box you see around elements in Webflow once you hover over them.

A screenshot of a computerDescription automatically generated

What this means is that if you have a string of text which, for example, contains letters like g, j, p, q, or y, you’ll need to make sure that they don’t extend beyond the text’s line height. If they do, the overlay won’t cover the entire text.

A screenshot of a computerDescription automatically generated

So always make sure that when you’re adding the loading animation to text, its line height is set accordingly.

Alternatively, you can also just add some padding to your text elements if needed.

Another thing to keep in mind is that this loading animation only works on text blocks and div blocks. If you add the attribute to an image, for example, it won’t do anything.

What you’ll need to do is put the image inside a div block and then add the skeleton attribute to said div block. Then you’ll want to add some padding to the div block of at least 1px. That’s because if you apply the loading animation to a div block of exactly the same size as the picture, an ever so tiny border will still be visible beyond the overlay, so you’ll want to extend it a bit.

Making it work

After you’ve added and configured the skeleton attribute to all the elements you want to hide behind a loading animation, all you need to do is add the MemberScript #23 custom code to your page, before the closing body tag.

You’ll notice that there are two versions of the code available – one for dark backgrounds and one for light backgrounds. Just choose whichever is right for your site.

Conclusion

That’s it, go ahead and publish your site and check out the new loading animations.

Take me to the Scripts

https://www.memberstack.com/scripts/23-skeleton-screens-content-loaders