OneTaskBy Tim King · Updated
Skeleton Loader Generator
Card, List, Article or Profile Placeholders With Pulse or Shimmer and Custom Colours
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the Skeleton Loader Generator works
A skeleton loader shows grey blocks in the shape of the content that is on its way, so the page feels faster and nothing jumps when the real text and images arrive. Pick a card, list, article or profile layout, choose shimmer or pulse, and copy the HTML and CSS.
The output is a style block and a small tree of empty div elements. Each block has the sk
class for its colour and animation, plus a shape class: sk-media for an image, sk-title for a
heading, sk-line for a line of text and sk-avatar for a round profile picture.
How the skeleton loader shimmer works
The shimmer is a linear gradient twice as wide as each block, running from the base colour to the
highlight and back. A keyframe animation slides the gradient's background-position across, so a
soft band of light sweeps over every block. Pulse is simpler: it fades the blocks' opacity down and
back up. Both stop for visitors who have asked for reduced motion.
Match the skeleton to the real layout
A skeleton only helps if it has the same size and shape as what replaces it. Use the same widths, image aspect ratio and number of lines as your real component, and put the skeleton in the same container. When the data arrives, swap the skeleton for the content in one step, so the layout does not shift and hurt your Cumulative Layout Shift score.
Accessibility
The wrapper has aria-busy="true" and an accessible name, which tells screen readers the region
is still loading. When you replace the skeleton, render the real content without aria-busy, or
set it to false, so assistive technology reads the new content.
FAQ
Is a skeleton loader better than a spinner?
For content that takes under a few seconds, usually yes. A skeleton hints at the layout, so the page feels closer to ready and nothing moves when it fills in. A spinner suits actions with no predictable shape, such as submitting a form or processing a file.
How do I swap the skeleton for real content?
Render the skeleton in the container first, fetch your data, then replace the container's
contents with the real markup. In React or Vue that is a conditional: show the skeleton while
loading is true and the component when it is false.
Can I use the skeleton loader on a dark theme?
Yes. Set the base colour to a shade slightly lighter than your background, for example #23262e
on #16181d, and the highlight a little lighter again. Keep the contrast low, because a bright
shimmer on a dark page is distracting.
Why does the shimmer look out of sync between blocks?
Each block runs its own gradient across its own width, so wide and narrow blocks sweep at
different speeds. For one continuous sweep, add background-attachment: fixed to .sk, which
ties the gradient to the viewport instead of each block.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Loading Screen Generator
Full-page preloader overlay that fades out when the page loads.
Loading Spinner
Design a CSS loading spinner and copy the code.
Card Builder
Design a card component and copy its HTML and CSS.
Progress Bar Generator
Generate a linear, striped, animated or circular CSS progress bar and copy the code.
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.