Skip to content

Shimmer Skeleton

Dark pure CSS skeleton screen for a profile card, article and comment list, with one synchronized shimmer sweep across every placeholder.

Also known as: skeleton loading screen, loading placeholder, shimmer loading effect, content loader skeleton

Pure CSS Skeleton Loaders Responsive Dark #animation #card #loader #placeholder #skeleton

Shimmer Skeleton live demo

Open in new tab

Pure CSS code (HTML, CSS)

A shimmer skeleton screen in pure CSS with three dark placeholders: a profile card, an article card and a comment list. Show it while data loads to keep the layout stable and give users a sense of progress, then swap it for the real content.

How it works

The root section.sk-wrap holds .sk-grid with three article.sk-card elements: .sk-profile, .sk-article and .sk-list. Every grey shape is a .sk-bone, sized with helper classes: .sk-line with .sk-line--sm, --lg or --xl for height and .sk-w-30 to .sk-w-100 for width, plus .sk-avatar, .sk-pill, .sk-media, .sk-tag and .sk-profile__cover.

The shimmer is one gradient on .sk-bone: a soft highlight band painted over --sk-base, three times as wide as the viewport. The sk-shimmer keyframes move its background-position, and background-attachment: fixed places the gradient relative to the viewport instead of each element. As a result, one diagonal light sweep runs across all cards at the same time, rather than every bar shimmering on its own. A negative animation-delay starts the sweep in view on the first frame. No JavaScript is used.

Customization

  • --sk-base and --sk-highlight on .sk-wrap: the placeholder color and the shimmer band color. Use #e5e9f0 and #f5f7fa for a light theme.
  • --sk-speed: duration of one sweep; lower values make the shimmer faster.
  • --sk-radius: corner radius of lines and blocks.
  • .sk-w-30 to .sk-w-100 on a .sk-line: vary line widths so the text looks natural.
  • height in .sk-media and .sk-profile__cover: match the size of your real image so nothing jumps when content arrives.
  • grid-template-columns in .sk-grid: show one, two or three placeholders per row.

Use cases

  • Profile pages: a profile card placeholder holds the layout while user data loads
  • Article lists: an article card skeleton keeps the page from jumping when content arrives
  • Comment sections: grey lines and avatars stand in for comments until they load
  • Dark interfaces: one synchronized shimmer sweep runs across every placeholder at once

Accessibility

Each card has aria-busy="true" and a visually hidden .sk-sr paragraph with role="status", such as "Loading profile…", so screen reader users hear what is loading. The decorative bones are inside aria-hidden="true" containers. When the data is ready, replace the card and remove aria-busy. With prefers-reduced-motion: reduce the moving gradient is removed and the bones only fade gently with sk-breathe.

Usage notes

iOS Safari ignores background-attachment: fixed; there each bone simply shimmers on its own, which still looks fine. Copy only the placeholder cards you need and mirror the spacing of your real components.

Shimmer Skeleton at a glance

Framework
Pure CSS
Code
HTML, CSS
JavaScript
Not needed, CSS only
Dependencies
None
Layout
Responsive, works on mobile, dark design
Category
Skeleton Loaders
License
Free for personal and commercial use

Questions about this template

Can I use the Shimmer Skeleton code for free?

Yes. You can copy or download the code and use it in personal and commercial projects, including client work. No sign-up is needed. Reselling it as part of a component library or template collection is not allowed; see the license.

How do I add it to my website?

There is nothing to install. Paste the HTML where the component should appear and add the CSS to your stylesheet. Download HTML gives you a complete page with everything already linked.

Does it need jQuery or a JavaScript framework?

No. It is built with HTML and CSS only, so there is no JavaScript to load.

Does it work on mobile?

Yes. The layout adapts to small screens. Use the Mobile and Tablet buttons above the live demo to check it at phone and tablet width.

Requirements

No dependencies. Pure HTML, CSS and JavaScript.

Shimmer Skeleton – Pure CSS skeleton loaders component screenshot
Shimmer Skeleton · Pure CSS Skeleton Loaders

More Skeleton Loaders

Skeleton Product Grid – Pure CSS skeleton loaders preview

Skeleton Product Grid

Pure CSS skeleton loader for a product grid with shimmering placeholder cards, a wave-like sweep and an accessible loading status.

Pure CSS Skeleton Loaders
Skeleton Card Loader – Tailwind CSS skeleton loaders preview

Skeleton Card Loader

Tailwind CSS skeleton loaders for an article card grid and a list, with pulse or shimmer animation that swaps to real content once loaded.

Tailwind CSS Skeleton Loaders