webdevpuneet.com

Related Snippets

73 in Loaders category
24–29 of 60

Skeleton to Content Crossfade

Typewriter Status Log Loader

Progress Bar with Milestone Labels

Audio Buffering Visualizer

Suspense-Style Data Fetch Fallback

Skeleton Chat Message Loader

Skeleton to Content Crossfade — Free HTML CSS JS Loading Snippet

Skeleton to Content Crossfade · Loaders · Plain HTML, CSS & JS · Live preview

CategoryLoaders
TagsSVGCSS AnimationAccessibilityLoading States

Copy & paste

Source Code

<div class="stc-wrap">
  <button class="stc-btn" id="stcReload">Reload data</button>
  <div class="stc-stack" id="stcStack" aria-busy="true" aria-live="polite">
    <div class="stc-layer stc-skeleton" id="stcSkeleton">
      <div class="stc-sk-row">
        <div class="stc-sk stc-sk-avatar"></div>
        <div class="stc-sk-lines">
          <div class="stc-sk stc-sk-line" style="width:60%"></div>
          <div class="stc-sk stc-sk-line" style="width:40%"></div>
        </div>
      </div>
      <div class="stc-sk stc-sk-block"></div>
      <div class="stc-sk stc-sk-line" style="width:90%"></div>
      <div class="stc-sk stc-sk-line" style="width:75%"></div>
    </div>
    <div class="stc-layer stc-content" id="stcContent">
      <div class="stc-row">
        <div class="stc-avatar">JM</div>
        <div>
          <p class="stc-name">Jordan Mills</p>
          <p class="stc-role">Product Designer · 2h ago</p>
        </div>
      </div>
      <div class="stc-block" aria-hidden="true">
        <svg viewBox="0 0 200 90" width="100%" height="100%"><rect width="200" height="90" rx="10" fill="#eef2ff"/><path d="M10 70 L50 40 L85 55 L120 20 L160 45 L190 15" stroke="#818cf8" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </div>
      <p class="stc-text">Shipped the new onboarding flow this morning — early signups are already converting 18% better than the previous version.</p>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Stacked absolute-position layers
Skeleton and content occupy the same box, eliminating layout shift when swapping between them.
Single class toggle drives both fades
.stc-loaded on the parent controls both the skeleton fade-out and content fade-in in perfect sync.
pointer-events prevents click traps
The hidden layer can never intercept clicks meant for the visible one.
Independent shimmer animation
A continuous gradient sweep runs on skeleton blocks, decoupled from the crossfade transition.
aria-busy accessibility state
Assistive technology is told when the region is loading versus ready.
Disabled reload button while loading
Prevents overlapping load cycles from a rapid double-click.
Matched skeleton and content shapes
Skeleton block sizes mirror the real content's avatar, image, and text line dimensions.
Zero dependencies
Pure HTML, CSS, and vanilla JavaScript — no animation or loading-state library.

About this UI Snippet

Skeleton to Content Crossfade — Stacked Layers with One Class Toggle

Screenshot of the Skeleton to Content Crossfade snippet rendered live

Swapping a skeleton loader for real content usually means the layout jumps or the skeleton just vanishes abruptly. This snippet crossfades between the two states smoothly by stacking both the skeleton and the real content in the same space and animating opacity, driven by a single CSS class toggle.

Two layers, one position

Both .stc-skeleton and .stc-content sit inside .stc-stack with position: absolute; inset: 0, occupying the exact same box. Because they overlap rather than sitting in normal document flow, toggling between them never causes a layout shift — the container's height is set by whichever layer is currently visible, and both layers are always present in the DOM, just at different opacity.

One class controls both transitions

Adding .stc-loaded to the parent .stc-stack is the only state change JavaScript needs to make: the CSS rules .stc-stack.stc-loaded .stc-skeleton { opacity: 0 } and .stc-stack.stc-loaded .stc-content { opacity: 1 } handle both fades from a single toggle, guaranteeing they're always in sync — there's no risk of the skeleton fading out on a different schedule than the content fades in.

pointer-events prevents a dead-zone trap

Both layers also flip pointer-events alongside opacity — the hidden layer gets pointer-events: none so an invisible skeleton (or invisible content, before load) can never intercept clicks meant for the layer that's actually visible. Without this, a user could click exactly where a real button appears to be and hit an invisible skeleton element instead.

The shimmer animation is independent of the crossfade

@keyframes stcShimmer animates a moving gradient across each skeleton block on a continuous loop, entirely separate from the opacity transition — the shimmer keeps running for as long as the skeleton is visible, and simply stops mattering once .stc-loaded fades it out, no coordination between the two animations required.

Accessible loading state

aria-busy="true" on the stack while loading, flipped to "false" once content is ready, tells assistive technology the region is in a busy/loading state without needing to read the skeleton's decorative shimmer bars as content.

Customizing it

Replace the setTimeout in load() with a real fetch() call, populating the content layer's actual data once the response resolves, before adding the .stc-loaded class.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA shimmering skeleton shows for about 1.4 seconds, then crossfades into the real content.
  2. 2
    Click "Reload data"The content fades back to the skeleton state, then crossfades to content again after the simulated delay.
  3. 3
    Inspect the two layersBoth .stc-skeleton and .stc-content exist in the DOM simultaneously, stacked with position: absolute.
  4. 4
    Replace the simulated delayIn the JS, swap the setTimeout in load() for a real fetch() call to your API.
  5. 5
    Populate real dataBefore adding the .stc-loaded class, update the content layer's text and images from your fetch response.
  6. 6
    Adjust the crossfade speedEdit the transition: opacity duration on .stc-layer to make the fade faster or slower.

Real-world uses

Common Use Cases

Social feed cards
Smoothly transition each card from placeholder to content as its data arrives, avoiding the abrupt vanish common to simple swaps.
Dashboard charts and stats
Crossfade charts and numbers from skeletons, with aria-busy telling assistive technology that the region is still loading.
Profile and detail pages
Avoid layout shift when user details load, since both layers share the same box and one parent class controls both fades.
Search result panels
Fade from a loading skeleton to results without clicks falling on the hidden layer, thanks to pointer-events being switched off on it.
Route transition moments
Smooth the gap between a navigation and its content, with a continuous shimmer running on the skeleton until the fade begins.

Got questions?

Frequently Asked Questions

Stacking with position: absolute means both layers occupy the exact same space at all times, so the container's size doesn't jump when swapping between them, and the opacity transition can crossfade smoothly. Removing and inserting DOM nodes instead would require the container to resize abruptly and couldn't animate the exit and entrance together.

The CSS defines both transitions relative to the same parent selector: .stc-stack.stc-loaded .stc-skeleton and .stc-stack.stc-loaded .stc-content. Since both rules key off the identical .stc-loaded class on the identical parent element, JavaScript only ever needs to add or remove that one class, and the browser's CSS engine keeps both opacity transitions perfectly synchronized.

An element with opacity: 0 is still in the document and still receives clicks by default. Without pointer-events: none on the hidden layer, a user clicking where a visible button appears to be could actually be clicking through to an invisible skeleton element sitting on top of or behind it, causing confusing dead clicks.

No — the shimmer keyframe animation keeps running on the skeleton layer indefinitely, but once .stc-loaded sets that layer's opacity to 0, it's simply invisible. There's no performance concern with leaving it running, though you could pause it via animation-play-state if you wanted to be strict about not animating hidden elements.

Replace the setTimeout body in load() with a fetch() call. Once the response resolves, populate the .stc-content layer's actual DOM elements with the real data (name, image, text) first, then add the .stc-loaded class — so the crossfade reveals real data, not stale placeholder content.