80+ CSS Spinners - Free Code + Demos

motion design by @beesandbombs

Single element with pseudo elements and animation.

I haven't made a loader for ages and I also haven't touched the blur() and contrast() method of making blobs. Turns out I was having difficulty when I hadn't added a white background to the layers.

loader ,Loaders

Seems each time a Zelda game comes out, I create a loader inspired by one in the game 😅 Here's a loader inspired by Link's Awakening. Enjoy!

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

Continuing with more loaders for whirl 👍 Contributions welcome! This one's an infinity path loader that uses stepped opacity on two pseudo-elements whose parents spin round. Enjoy!

Pure CSS3 preloader, Pure CSS3 preloader 2019 Latest Pure CSS3 preloader

A multicolor loader ring with animated SVG stroke-dashoffsets. Styles and keyframes are generated based on the amount of colors in a Sass list variable.

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

Classical stroke-dashoffest/dasharray approach, no SMIL this time, but CSS keyframes in style in SVG in style. Inception.

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. Recording of how the animation looks. Inspiration. Demo mentioned in my Various Methods for Expanding a Box While Preserving the Border Radi...

Read More

This Is really a WEIRD one....

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

Created for the CodePen Challenge. For some reason, Firefox won't animate background-position here and that breaks the demo. If you have any idea what's the problem and how it could be fixed, I'm listening. Update: fixed! Inspiration: this .gif by Erica Anderson

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

Simple loading animation with pseudo elements and CSS animation.

A difficult shape to draw in CSS

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

A collection of Google Loaders in a new look

My take on the simple loader for Colt Steele's advanced developer bootcamp

Resizable animated spinner with a blurred animation effect.

CSS3 animations spinners

Simple CSS spinners and throbbers made with CSS and minimal HTML markup.

A modern svg spinner animarion in css

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

Pixelated circular loader with box-shadow.

The code is a mess, no doubt, but it's about the outer values ;) The idea is originally from Gal Shir, a reeeally talented guy! https://dribbble.com/shots/4026985-If-only-I-could

Messing around with loading spinners, i'm pretty happy with it

Simple spinner made with HTML and CSS animations.

A simple CSS-only loading spinner made with SASS & Bourbon.

Rainbow Spinner

A simple CSS-only loading spinner made with SASS & Bourbon.

CSS3 based spinner with discs rotating at different speeds.

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

Paying with CSS to create loaders and spinners.

A collection of animated CSS spinners, throbbers, and loaders with minimal markup. Each spinner will display as "Loading..." in IE9 and below. Learn more at https://github.com/jlong/css-spinners

Just recreating http://codepen.io/scottkellum/pen/tzjCK to learn how he did it.

Simple animated loading spinner, with video tutorial.

Variety of loading Spinners animated with CSS.

I found these loaders at https://cssfx.dev/ and customized them to meet my own preferences.

A collection of CSS Spinners.