Hand-Picked HTML and CSS Loading Spinner Code Examples

Explore a curated collection of hand-picked free HTML and CSS loading spinner code examples to create stylish and interactive loading indicators for your website.

Pencil Preloader

Author:
Jon Kantner | February 3, 2023
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Satellite Spinner

Author:
Michelle Barker | February 1, 2023
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Smiley Preloader

Author:
Jon Kantner | December 30, 2022
Made with:
HTML / CSS

About a code

A spinner that spins with a smile in every loop.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Google Fiber Loading Animation Idea

Author:
Derek Story | December 23, 2022
Made with:
HTML / CSS (SCSS)

About a code

Loading animation using only CSS and HTML.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Snowball Preloader

Author:
Jon Kantner | December 13, 2022
Made with:
HTML / CSS

About a code

Hm… a snowman in progress?

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Stunt Preloader

Author:
Jon Kantner | November 16, 2022
Made with:
HTML / CSS

About a code

This one is just too brave.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Leaky Preloader

Author:
Jon Kantner | November 7, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Compass Preloader

Author:
Jon Kantner | October 28, 2022
Made with:
HTML / CSS

About a code

A concept of a preloader that resembles the Safari icon.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Spinner and Balls

Author:
Jon Kantner | September 1, 2022
Made with:
HTML / CSS

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

CSS Only Rotating Loader

Author:
Chris Smith | June 28, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Remix CD Loader

Author:
Chance Strickland | April 12, 2022
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Ribbon Spinner

Author:
Jon Kantner | April 8, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Loading Goes Off Track

Author:
Jon Kantner | March 17, 2022
Made with:
HTML / CSS

About a code

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

Skateboard-Like Preloader

Author:
Jon Kantner | March 11, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Acrobatic Preloader

Author:
Jon Kantner | January 27, 2022
Made with:
HTML / CSS

About a code

It goes round and round and out like a dolphin.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

The Square vs The Circle

Author:
Temani Afif | January 9, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

The Square

Author:
Temani Afif | January 8, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

The Infinity II

Author:
Temani Afif | January 7, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

The Blob II

Author:
Temani Afif | January 6, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

That Loader in CSS

Author:
Jhey | January 14, 2022
Made with:
HTML (Pug) / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

The Maze

Author:
Temani Afif | January 3, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

The Moving

Author:
Temani Afif | January 1, 2022
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Pencil Loader

Author:
Saahil Shukla | December 21, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Cube Spinner

Author:
Josetxu | December 16, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Solo.to Loader Animation

Author:
Yoav Kadosh | July 15, 2021
Made with:
HTML / CSS (SCSS)

About a code

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

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨