135 CSS Spinners

About a code

Pencil Preloader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Satellite Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Smiley Preloader

A spinner that spins with a smile in every loop.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Google Fiber Loading Animation Idea

Loading animation using only CSS and HTML.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Snowball Preloader

Hm… a snowman in progress?

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Stunt Preloader

This one is just too brave.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Leaky Preloader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Compass Preloader

A concept of a preloader that resembles the Safari icon.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Spinner and Balls

Balls manage to stay on a curve that spins and stretches in a circle.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

CSS Only Rotating Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Remix CD Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Ribbon Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Loading Goes Off Track

This preloader gets derailed then somehow gets back on track… for only a little while.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Skateboard-Like Preloader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Acrobatic Preloader

It goes round and round and out like a dolphin.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

The Square vs The Circle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Square

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Infinity II

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Blob II

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

That Loader in CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

The Maze

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Moving

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pencil Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Cube Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Solo.to Loader Animation

The logo is made of 2 non-closing circular paths with stroke. The animation is based on the stroke-offset property.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Fiery Preloader

An SVG preloader that resembles a swirl of fire.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Dot Clock Preloader

Watch time fly while you wait.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Kinetic CSS Loaders

Single HTML element CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

The Shape III

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Spinner III

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Hypnotic II

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Shapes II

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Flipping

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Shuriken

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Spinner II

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Hypnotic

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Shapes

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

The Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Simple CSS Loaders

Single HTML element CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Yet Another CSS Loader #3

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Yet Another CSS Loader #2

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Yet Another CSS Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Create Water Wave

Create water wave. Animation effects in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Spinners

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Glowing Loader Ring Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Take On Me Loading Circle

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS3 Loader & Spinners

This is a collection of different types of loaders, spinners. There are no image dependencies in this. It's is done using CSS. Hence it is easily customization too.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Ball Motion Preloader

A preloader where balls show their trajectories while rotating.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Face Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Trinity Spinner

A spinner that morphs from approx third length dashes to third length gaps.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

WiFi Loader Animation - Only CSS

Simple WiFi loader animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Big Collection: Houdini-Animated 1 Element Pure CSS Spinners

Note that they're only animated in supporting browsers - that's just Chromium browsers for now. They're all different, no two of them identical - can you spot the differences between similar ones? Can you figure out how they were made before checking the code?

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Circle SVG

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

3D Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Neumorphism Gradient Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Spinner Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Another Spinner

Single element with pseudo elements and animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Animation with Translate and Z-index

Spinner/Loading animation with translate and z-index.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Gooey Loaders

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

About a code

Animated SVG Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Pure CSS Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pure CSS Loader

Pure CSS loader with clip-path.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pure CSS Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Spiral Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pure CSS Loader

1 element transparency tails.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: conic-gradient.js

About a code

Liquid Loader

Clean code, pastel gradient.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Liquid Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Pure CSS Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Single Element Goey Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Loaders For Website

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Rings Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Dual Triangle Spinners

A collection of preload animations made using only two triangles, whether they look like practical ones or just plain weird.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Infinity Path Spinner

This one's an infinity path spinner that uses stepped opacity on two pseudo-elements whose parents spin round.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Spinner

Opposites (attract) spinner animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Longcat Spinner

Well, something is sure taking a loooooooooong time to load.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Gradient Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

50+ Pure CSS3 Preloaders

Smoother, lightweight, faster and easy to use product.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Multicolor Spinner Ring

A multicolor spinner ring with animated SVG stroke-dash offsets. Styles and keyframes are generated based on the number of colors in a Sass list variable.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Spin

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Hexagon Spinner With CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Circular CSS Loader

Squeezing out a neat loader animation from under 70 lines of pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Simple Spinner

Simple spinner as background SVG image data URI with style.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Quick Loader With CSS Transforms, Vars & Houdini Magic

Uses Houdini to animate the scaling factor --sx of the bars, so it only works in Chrome with the Experimental Web Platform features flag enabled.

Compatible browsers: Chrome

Responsive: yes

Dependencies: -

About a code

Weird Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Light Ball Preloader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Simple Spinners

These are some simple preloaders that can be used to make a process waiting time wonderful.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

One Div Loader

HTML one div spinner.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

About the code

CSS 3D Loader

One element pure CSS 3D loader.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

CSS Spinner Animations

Compatible browsers: Chrome, Edge (partial), Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Spinner Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Squares Spinner

Elastic bouncing squares loader.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Squares Spinner Animation

Simple spinner animation with pseudo elements and CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Red Dead Redemption Loader

A difficult shape to draw in CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Pure CSS Spinner Animations

Playing around with CSS animations to create some simple spinner animations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Spinner Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

CSS Spinner Animation

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Triangle Spinner Animation

Triangle spinner in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Loading Things... Spinner.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Google Spinners Redesign

A collection of Google Loaders in a new look.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Simple CSS Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Comet Spinner

Comet spinner in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

One Element CSS Spinners

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Spinner Loader

Resizable animated spinner with a blurred animation effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Spinner with Glowing, Gooey Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Terminal Spinner

Elegant terminal spinner with HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About a code

Bouncy Cube Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

CSS3 Animations Spinners

Fully CSS3 animations spinners. No JS needed.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Google Fonts, Reset.css, Autoprefixer.js

About a code

Sass @mixin Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

CSS Spinners

Simple CSS loading indicators made with CSS and minimal HTML markup.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Spinner

Pure CSS spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS and SVG Spinner

A modern SVG spinner animation in CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: Reset.css, Autoprefixer.js

About a code

Neon Grid Loaders

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Simple Pure CSS Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Polygon Spinner

A loading spinner that draws an SVG triangle and then animates it to a dodecagon and back.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: TweenMax.js, Underscore.js

About a code

Responsive Pageloader

A simple preloader that you can customize easy with the Less variables.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

8 Bit Spinner

Pixelated circular loader with box-shadow.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Reset.css, Prefixfree.js

About the code

CSS Loading Animation

Nice effect for CSS loading spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Simple Repeating Spinner

Simple repeating spinner with nice animation.

Compatible browsers: Chrome, IE, Firefox, Opera, Safari

Dependencies: -

About a code

Spinning CSS Loader

One div for a spinning loader w/no JavaScript. Mimics the look of Chrome's browser tab loader. Keyframes and pseudos help to bring this animation to life along with using other techniques like creating half a circle to make the loader fill.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

CSS3 Loading Spinner

Cool CSS3 loading spinner snippet.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Google Fonts, Autoprefixer.js

About a code

CSS3 Loading Spinner

Colorful pure CSS loader with only two elements.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Pure CSS Spinner

Pure CSS dots spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Spinner

Simple spinner made with HTML and CSS animations.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Autoprefixer.js

About the code

Loading Spinner

Cool CSS3 loading spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Reset.css, Autoprefixer.js, Modernizr.js

About a code

VSCO Loader

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Rainbow Spinner

HTML and CSS rainbow spinner.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Reset.css, Prefixfree.js

About the code

Simple CSS-only Loading Spinner

A simple CSS-only loading spinner made with SASS

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Normalize.css

About the code

Digital Spinner

CSS3 based spinner with discs rotating at different speeds.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

CSS Spinner Animation

Another CSS spinner animation. Not practical since it uses a ton of DOM elements, but it looks pretty.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Spinner

Single DOM element spinner. "Clock arrows" made with generated content (pseudo-elements :before and :after). Animations applied to pseudo-elements.

Compatible browsers: Chrome, IE, Edge, Firefox, Opera, Safari

Dependencies: Normalize.css, Autoprefixer.js

About a code

CSS Spinner

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -