Skeleton Loader Generator

Create skeleton screens with shimmer or pulse animation, colour and speed control. Live preview, copy the CSS.

Tool

UI Elements/Skeleton

Radiuspx

Speeds

Base

Highlight

.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, #1a1e28 25%, #2a3040 50%, #1a1e28 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

About the skeleton loader generator

Skeleton screens replace spinners with grey shapes that match the layout about to appear. They make waiting feel shorter because the page appears to be assembling rather than frozen, and they prevent the layout shift a spinner causes when real content finally arrives.

The shimmer is a wide gradient moved across the shape with background-position, which is cheaper than animating opacity on many elements.

How to use it

1Choose shimmer, pulse or no animation.
2Set the base and highlight colours, keeping them close together.
3Set the radius to match the real content.
4Adjust the speed. Around 1.4 seconds feels calm.
5Copy the CSS and apply it to shapes matching your layout.

Worth knowing

Make the skeleton match the real layout closely, or the content will jump when it loads.

Questions

Are skeletons better than spinners?

For content that has a known shape, yes. They suggest progress and reserve the space, so nothing jumps when the data arrives. For an unknown wait, a spinner is still fine.

Why does my shimmer not move?

background-size must be larger than the element, usually 200%, so there is somewhere for background-position to travel.

How long should a skeleton show?

If the wait is under about 300 milliseconds, show nothing. Flashing a skeleton for an instant is more distracting than a brief pause.