animation
CSS Skeleton Loading Screen
Animated shimmer skeleton placeholders that preview content shape while data loads.
Skeleton screens replace blank loading states with animated placeholder shapes that mimic the layout of the incoming content. The shimmer effect — a light sweep across grey blocks — is achieved by animating a gradient's background-position. They feel faster than spinners because they give structural context to the user.
Usage Note
Combine skeleton shapes to mirror the actual content layout. Replace the skeleton elements with real content once data loads — typically by toggling a loading class. Always add aria-busy="true" to the skeleton container and aria-label="Loading" for screen readers.
Tags
#skeleton#loading#shimmer#placeholder#animation