CSS loader design examples

30 Stunning CSS Loader Design Examples

Loaders, also known as preloaders or spinners, are an essential element of modern web design to keep users' attention while content is loading.

If you're looking for inspiration for your next web project, you're in the right place. In this article, we've hand-picked 30 stunning examples of CSS loader designs that are sure to impress you.

Acrobatic loader

A CodePen of a loader with acrobatic skills made with only CSS and HTML

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Skateboard loader

A pure CSS code snippet of a loader with a skateboard-like animation.'

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Loading goes off track

A CSS loader without using JavaScript with a curious animation as if the loader was going out of control for a few moments.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Loaders by UIBall

A free collection of 24 copy/paste loaders and spinners for your next Rect project, built with modern HTML and CSS.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Shopping cart preloader

A CodePen of a cart-shaped preloader with an appealing animation.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Whirl

Whirl is a curated list of CSS-loading animations with more than 100 options.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

One Div Loaders

A set of open-source single-color loading spinners made with pure CSS and an HTML div element.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Dance morph loader

A code snippet of a colorful and mesmerizing loader using only CSS and HTML

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Frosted glass loader

A code fragment of a loader with a creative design using a blurred glass effect.

Made with:

HTML
CSS
JavaScript

Dependencies:

GSAP
View Code and Demo

Compass loader

A code snippet of a beautiful CSS loader in the shape of a compass.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Infinity preloader

A code fragment of a creative infinity shape loader with gradient color.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Snowball loader

A code snippet of a creative CSS loader that mimics a realistically styled snowball.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Smiley preloader

A code snippet of a creative loader showing a smiley face as it rotates.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Pencil preloader

A CodePen of a CSS loader using a pencil with a creative spinning effect.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Slack loader

A code fragment of a creatively animated loader using the old Slack logo.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo

Jelly box preloader

A CodePen of a Jelly box preloader with an eye-catching rotating animation.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Inspired loader

A code fragment of an orange spinner with a fascinating animation using only HTML/CSS.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo

Simple loader

A simple loader composed of dots that repeatedly enter and exit the view.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Ring of light

A CodePen of an eye-catching ring-style loader without needing JavaScript

Made with:

HTML
CSS

Dependencies:

Haml
SCSS
View Code and Demo

Code loader

A basic loader using two curly braces alternately changing opacity and size.

Made with:

HTML
CSS

Dependencies:

Less
View Code and Demo

New preloader

A code fragment of a preloader composed of three pieces of different sizes performing different animations.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

CSS stairs loader

A preloader with an ingenious animation with a ball alternately climbing stairs.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo

CSS Flippy loader

Code fragment of a spinner with squares forming the words "wait" and "loading" with an eye-catching flipping animation.

Made with:

HTML
CSS

Dependencies:

Pug
Stylus
View Code and Demo

Neumorphic preloader

A code snippet of a neumorphic style loader with a beautiful loading animation of four moving squares.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

Loader animation

A rounded spinner with a subtle illuminated animation using only HTML and CSS.

Made with:

HTML
CSS

Dependencies:

None
View Code and Demo

3D boxes loader

A CodePen of a 3d loader made of boxes with an ingenious animation.

Made with:

HTML
CSS

Dependencies:

Pug
SCSS
View Code and Demo

Pure CSS book loader

A code snippet of a spinner mimicking the opening of a book with a nifty animation

Made with:

HTML
CSS

Dependencies:

Pug
SCSS
View Code and Demo

Infinite loader

A CodePen of a preloader using three dots endlessly following each other with eye-catching animation.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo

∞ Loader animation

Code snippet of a 3D infinity symbol used as a loader with a captivating animation.

Made with:

HTML
CSS
JavaScript

Dependencies:

JQuery
Three.js
SCSS
View Code and Demo

Colorful dissolving loader

A CodePen with a colorful loader with a pleasant dissolving effect.

Made with:

HTML
CSS

Dependencies:

SCSS
View Code and Demo