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