20+ Spin Animation CSS

March 1, 2025

Our collection Spin Animation CSS is a simple and powerful movement to your web design. It's for a loading spinner, 3D Fidget Spinner, or creative hover effects, CSS makes it easy to create smooth and engaging spin animations.

We have more than 20 popular and latest published spin animations which are made with HTML, CSS and some designs using JS. You can collect the codes by visiting the demo link with Codepen.

Spinning rings

Latest design Spinning animation rings.

Preview

Codepen Code

Author: Chris Bolson

Published: January 16, 2025

Made With: HTML, CSS

CSS Spinner (abstract design)

This spinner has a unique abstract design, featuring an orange circle with a rotating purple arc.

Preview

Codepen Code

Author: Hardik Dave

Published: November 29, 2024

Made With: HTML, CSS

loader-spiner

This spinner looks like Material Design-style loading indicator.

Preview

Codepen Code

Author: Nurkary

Published: November 28, 2024

Made With: HTML, CSS

Spiner animation

This looks like a circular loading spinner with a glowing neon effect.

Preview

Codepen Code

Author: baradoz

Published: October 27, 2024

Made With: HTML, CSS

Spiner / Loader :: Compliance Connect

Small color spiner.

Preview

Codepen Code

Author: Gustavo Simone

Published: October 25, 2024

Made With: HTML, CSS

Spiner Square

Red Colors Spiner Square.

Preview

Codepen Code

Author: oleg

Published: September 6, 2024

Made With: HTML

Spiner

This Spiner make with HTML, CSS and JS.

Preview

Codepen Code

Author: Александр Атакишиев

Published: August 6, 2024

Made With: HTML, CSS (SCSS), JS

Spin animation css multiple colors

Slowly Spin animation.

Preview

Codepen Code

Author: Emadm0

Published: September 2, 2022

Made With: HTML, CSS

Magic Card

Yet another glowing card with gradient animation.

Preview

Codepen Code

Author: Gayane Gasparyan

Published: July 23, 2021

Made With: HTML, CSS

Spin (animation) css

Yellow color full rounded Spiner.

Preview

Codepen Code

Author: bestca

Published: April 29, 2021

Made With: HTML, CSS

Loading spiner

Awsome loading spiner.

Preview

Codepen Code

Author: Yousif

Published: October 6, 2018

Made With: HTML, CSS

3D Fidget Spinner (CSS only)

3D Fidget spin animation with CSS.

Preview

Codepen Code

Author: Abdul-hadi Hawari

Published: April 27, 2017

Made With: HTML, CSS (SCSS)

Hover Spinners

CSS spin animation on hover me.

Preview

Codepen Code

Author: Amr Shaalan

Published: March 4, 2017

Made With: HTML, CSS

You spin me round - css spin animation

One picture is used in two divs. Second is masked in circle and that makes a sipned coffee.

Preview

Codepen Code

Author: Paulina Adamkiewicz

Published: February 2, 2017

Made With: HTML, CSS (Sass)

Pride spinner

Gradiant colors spinner animation with HTML and CSS (SCSS).

Preview

Codepen Code

Author: Allan

Published: January 21, 2017

Made With: HTML, CSS (SCSS)

Spiners

Multiple colors spiner.

Preview

Codepen Code

Author: Practicous

Published: August 10, 2016

Made With: HTML, CSS (SCSS)

Multiple loaders

One code multiple spiner.

Preview

Codepen Code

Author: Eva

Published: September 17, 2016

Made With: HTML, CSS

Super Spiner

This is a css simple spiner.

Preview

Codepen Code

Author: SuperMario

Published: May 24, 2016

Made With: HTML, CSS

One element spinner

This spiner very fast moved and colourful.

Preview

Codepen Code

Author: Julien Jolly

Published: May 4, 2016

Made With: HTML, CSS (SCSS)

CSS Only spinning gears

Spinning gears spinning alone or two spinning and appearing to push each other along the way gears should.

Preview

Codepen Code

Author: LindsayMac

Published: June 29, 2015

Made With: HTML, CSS

Flat Preloader (keyframes demo)

4 Colors combinations spiner.

Preview

Codepen Code

Author: Codrin Pavel

Published: June 26, 2014

Made With: HTML, CSS

Playing a CSS animation on hover

A little example showing how animation-play-state can come in handy.

Preview

Codepen Code

Author: Val Head

Published: March 8, 2013

Made With: HTML, CSS