Welcome to our collection of CSS loading spinners. Within these digital pages, we've meticulously assembled a compendium of hand-picked, free HTML and CSS loading spinner code examples sourced from trusted repositories such as CodePen, GitHub, and other valuable resources.

As of April 2023, we proudly present an extensive update to this collection, introducing a remarkable addition of 54 new items. Our goal is to empower web developers, designers, and enthusiasts with the latest and greatest loading spinner designs, ensuring that your projects are equipped with the most cutting-edge user experiences.

Explore this curated treasure trove and discover the creative potential of loading spinners to enhance your web design endeavors.

Related Articles

  1. CSS Loaders

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Pencil Preloader

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

Responsive: yes

Dependencies: -

Author

  • Michelle Barker

Made with

  • HTML / CSS

About a code

Satellite Spinner

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

Responsive: no

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

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: -

Author

  • Derek Story

Made with

  • HTML / CSS (SCSS)

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: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Snowball Preloader

Hm… a snowman in progress?

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

Responsive: no

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Stunt Preloader

This one is just too brave.

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

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Leaky Preloader

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

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

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: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

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: -

Author

  • Chris Smith

Made with

  • HTML / CSS

About a code

CSS Only Rotating Loader

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

Responsive: no

Dependencies: -

Author

  • Chance Strickland

Made with

  • HTML / CSS (SCSS)

About a code

Remix CD Loader

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

Responsive: no

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Ribbon Spinner

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

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

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: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

About a code

Skateboard-Like Preloader

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

Responsive: yes

Dependencies: -

Author

  • Jon Kantner

Made with

  • HTML / CSS

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: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

The Square vs The Circle

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

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

The Square

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

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

The Infinity II

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

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

The Blob II

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

Responsive: no

Dependencies: -

Author

  • Jhey

Made with

  • HTML (Pug) / CSS

About a code

That Loader in CSS

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

Responsive: yes

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

The Maze

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

Responsive: no

Dependencies: -

Author

  • Temani Afif

Made with

  • HTML / CSS

About a code

The Moving

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

Responsive: no

Dependencies: -

Author

  • Saahil Shukla

Made with

  • HTML / CSS

About a code

Pencil Loader

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

Responsive: no

Dependencies: -

Author

  • Josetxu

Made with

  • HTML / CSS

About a code

Cube Spinner

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

Responsive: yes

Dependencies: -

Author

  • Yoav Kadosh

Made with

  • HTML / CSS (SCSS)

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: -