How to add a skeleton loader in Webflow

In this tutorial, Sandro, co-founder of the Gemeos Webflow agency, shows you how to add a skeleton loader in Webflow to improve the perception of loading speed.

Example

1. Create the skeleton elements in Webflow

Create Divs that match the size and layout of your real content. Give them the skeleton class. These elements will be visible while the page loads, then hidden once the content is ready.

2. Add the CSS animation in an embed

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

3. Hide the skeletons once the content has loaded

window.addEventListener('load', function() {
  document.querySelectorAll('.skeleton').forEach(function(el) {
    el.style.display = 'none';
  });
  document.querySelectorAll('.real-content').forEach(function(el) {
    el.style.display = 'block';
  });
});

Conclusion

The skeleton loader improves the perception of speed without changing actual performance. Use cases:

• CMS collection cards loaded dynamically
• Images in lazy load
• Content injected via API or embed