Loading | Effect.Labs

Q: How to create a CSS spinner without JavaScript?

Use a div with border-radius:50%, a transparent border except on one side, and animation: spin 1s linear infinite. The @keyframes spin animation rotates from 0 to 360deg. It's the lightest possible loader.

Q: What is the best loader for a website?

Use a skeleton screen for long content (cards, lists) and a simple spinner for short actions (submit button). The skeleton gives a sense of speed because it shows the page structure.

Q: How to animate a skeleton screen in CSS?

Create gray rectangles with border-radius that mimic the content structure. Add an animated gradient (shimmer) with background: linear-gradient and animation on background-position.

Q: Are CSS loaders performant?

Yes. CSS animations using transform and opacity are processed by the GPU. A CSS spinner uses fewer resources than a GIF or animated SVG. Avoid animating box-shadow or width which trigger repaints.

Q: How to center a loader on the page?

Use display:flex, align-items:center and justify-content:center on the container. For a fullscreen overlay, add position:fixed, inset:0, z-index:9999 and a semi-transparent background.

How to create elegant loading indicators in pure CSS? These 28 loaders cover every style: circular spinners, progress bars, pulse effects, skeleton screens and dot animations. No JavaScript required — everything is CSS with @keyframes. Each loader is under 2 KB.

Classic Spinner

Spinning circle, simple and effective.

CSS Minimal

Bouncing Dots

Three dots bouncing in cascade.

CSS Playful

Pulse Ring

Rings pulsing outward.

CSS Radar

Progress Bar

Indeterminate progress bar.

CSS Linear

Cube Flip

3D cube flipping over.

CSS 3D

Wave Bars

Audio wave-shaped bars.

CSS Audio

Orbit

Dot orbiting around a center.

CSS Circular

Skeleton Screen

Shimmer placeholder for content.

CSS Content

DNA Helix

Double helix in 3D rotation.

CSS 3D

Cube Grid

3x3 grid of cubes in sequence.

CSS Grid

Morphing Shape

Shape morphing while rotating.

CSS Transform

Circular Progress

SVG circle filling progressively.

SVG Progress

Bouncing Squares

Bouncing squares in cascade.

CSS Playful

Text Loading

Text with animated dots.

CSS Text

Gradient Ring

Rotating gradient ring.

CSS Gradient

Heartbeat

Heartbeat pulse effect.

CSS Pulse

Infinity Loop

Animated infinity loop.

CSS Loop

Glitch Text

Retro glitch effect on text.

CSS Glitch

Card Skeleton

Classic card placeholder with avatar, title and text lines animated by a sliding shimmer.

CSS Shimmer Card

List Skeleton

List of elements with avatars and text lines in progressive loading.

CSS Shimmer Liste

Image Grid Skeleton

2x2 grid of image placeholders with staggered shimmer for a cascade effect.

CSS Grid Images

Profile Skeleton

Profile page loading: large avatar, name, bio and stats row.

CSS Shimmer Profil

Article Skeleton

Blog article skeleton: hero image, title, paragraphs and author info.

CSS Shimmer Blog

Dashboard Skeleton

Mini dashboard with stat cards, chart area and table rows loading.

CSS Shimmer Dashboard

Pulse Loading

Same card structure but with a pulse/breathing animation instead of classic shimmer.

CSS Pulse Card

Wave Shimmer

Undulating shimmer that flows like water, with a fluid and organic motion.

CSS Wave Organique

Rainbow Shimmer

Skeleton with a colorful rainbow gradient shimmer sweeping across elements.

CSS Rainbow Gradient

Alice Durand

@alice_dev

New project online! A collection of modern CSS effects for your web interfaces.

PREVIEW IMAGE

Skeleton to Content

Click to toggle between skeleton state and real content with a smooth transition.

Fundamentals

Design & Visuals

Animations & Scroll

Gallery & More