185 CSS Loaders

Collection of HTML and CSS loader animation code examples from CodePen, GitHub and other resources. Update of June 2021 collection. 32 new examples.

CSS Spinners

Author

Jhey
February 21, 2023

Made with

HTML / CSS

About a code

3D Loader Cube

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

Responsive: no

Dependencies: -

Author

Jon Kantner
February 17, 2023

Made with

HTML / CSS

About a code

Bicycle Preloader

A bicycle made of spinners!

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

Responsive: yes

Dependencies: -

Author

Josetxu
January 31, 2023

Made with

HTML / CSS

About a code

Building Loader CSS

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

Responsive: yes

Dependencies: -

Author

leimapapa
January 11, 2023

Made with

HTML / CSS

About a code

CodePen Loader

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

Responsive: no

Dependencies: -

Author

Jon Kantner
December 19, 2022

Made with

HTML / CSS

About a code

LEGO Preloader

A LEGO-themed preloader concept of a tower seemingly in endless progress.

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

Responsive: yes

Dependencies: -

Author

Jon Kantner
November 8, 2022

Made with

HTML / CSS

About a code

Infinity Preloader

A colorful infinity-shaped spinner that involves a tricky implementation of the special gradient stroke. Split the gradient in two, do likewise with the infinity shape. The shape, however, needs to be split in such a way that each stroke can emerge with one gradient end and leave at the other. Then of course, you gotta make that seamless connection for the whole animation (the rough part).

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

Responsive: yes

Dependencies: -

Author

Josetxu
November 2, 2022

Made with

HTML (Pug) / CSS

About a code

CSS Bar Loader

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

Responsive: yes

Dependencies: -

Author

Josetxu
October 25, 2022

Made with

HTML (Pug) / CSS

About a code

CSS Rainbow Cuboid Loader

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

Responsive: yes

Dependencies: -

Author

Josetxu
October 19, 2022

Made with

HTML / CSS

About a code

CSS Crazy Loading Arches

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

Responsive: yes

Dependencies: -

Author

Jhey
July 20, 2022

Made with

HTML / CSS

About a code

Tap for Perspective Loading with CSS

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

Responsive: yes

Dependencies: -

Author

Dario Corsi
July 18, 2022

Made with

HTML / CSS

About a code

Ice Pop Loader

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

Responsive: yes

Dependencies: -

Author

Jon Kantner
July 14, 2022

Made with

HTML / CSS

About a code

Shopping Cart Preloader

Just another SVG preloader, and it’s a shopping cart.

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

Responsive: yes

Dependencies: -

Author

Haja Randriakoto
July 13, 2022

Made with

HTML (Pug) / CSS (SCSS)

About a code

Bouncing Cube Loader

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

Responsive: yes

Dependencies: -

Author

Ayoub Mkira
June 10, 2022

Made with

HTML / CSS

About a code

Loading

Create spinner for loading using HTML & CSS.

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

Responsive: no

Dependencies: -

Author

Jon Kantner
April 15, 2022

Made with

HTML / CSS

About a code

3D Preloader

A (fake) 3D spinner featuring tubes that change color when pushed out.

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

Responsive: yes

Dependencies: -

Author

Ana Tudor
January 12, 2022

Made with

HTML / CSS (SCSS)

About a code

Pure CSS 1 Div Loader

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

Aybüke Ceylan
December 8, 2021

Made with

HTML / CSS (SCSS)

About a code

Loading Text Animation

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

Responsive: yes

Dependencies: -

Author

Jon Kantner
October 11, 2021

Made with

HTML / CSS

About a code

Book Preloader

A looping 3D-ish book animation that could act as a preloader.

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

Responsive: yes

Dependencies: -

Author

Jon Kantner
October 5, 2021

Made with

HTML / CSS

About a code

Gradient Stroke & Bounce

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

Responsive: yes

Dependencies: -

Author

Jon Kantner
July 1, 2021

Made with

HTML / CSS (Sass)

About a code

Bouncy Preloaders

A small preloader collection featuring bouncing balls and bars.

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

Responsive: yes

Dependencies: -

Author

shawn
June 30, 2021

Made with

HTML / CSS

About a code

Glassmorphism Loader

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

Responsive: no

Dependencies: -

Author

Jon Kantner
March 16, 2021

Made with

HTML / CSS

About a code

Hexagonal Ripple Preloader

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

Responsive: no

Dependencies: -

Author

Ana Tudor
March 14, 2021

Made with

HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Infinity Roll Loader with Houdini Magic

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

Responsive: yes

Dependencies: -

Author

Jhey
January 27, 2021

Made with

HTML (Pug) / CSS (Stylus)

About a code

Animated Charging Border

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

Author

crayon-code
December 31, 2020

Made with

HTML (Pug) / CSS (SCSS)

About a code

Mosaic Loader

Mosaic ripple loading animation.

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

Responsive: no

Dependencies: -

Author

Jon Kantner
November 17, 2020

Made with

HTML / CSS (Sass)

About a code

Perspective Sphere Preloader

A CSS 3D preloader.

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

Responsive: yes

Dependencies: -

Author

Jon Kantner
November 3, 2020

Made with

HTML / CSS

About a code

One-Element Hourglass

A hourglass preloader created using only one element. clip-path is the key property here.

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

Responsive: yes

Dependencies: -

Author

Abubaker Saeed
August 23, 2020

Made with

HTML (Pug) / CSS (SCSS)

About a code

Loading Animation

Cute loading animation.

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

Responsive: no

Dependencies: -

Author

Bilal.Rizwaan
August 13, 2020

Made with

HTML / CSS

About a code

Awesome Loading Screen

Awesome loading screen using only HTML & CSS.

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

Responsive: no

Dependencies: -

Author

Murat Benli
August 12, 2020

Made with

HTML / CSS

About a code

Shimmer Loading

Skeleton loading (shimmer loading) cards with Tailwind CSS.

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

Responsive: yes

Dependencies: tailwind.css

Author

Jhey
August 12, 2020

Made with

HTML (Pug) / CSS (Stylus)

About a code

Loading Cubes

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

Responsive: yes

Dependencies: -

Author

Sudeep Gumaste
July 27, 2020

Made with

HTML / CSS (SCSS)

About a code

Loader Animation

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

Responsive: no

Dependencies: -

Author

alphardex
July 16, 2020

Made with

HTML / CSS (SCSS)

About a code

Clock Loader

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

Responsive: no

Dependencies: -

Author

Jon Kantner
June 24, 2020

Made with

HTML / CSS

About a code

Neumorphic Preloader

A preload animation where a circle containing squares pops out of the surface, and then one square pops in and out around the circle while the others slide into each place the first square was.

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

Responsive: yes

Dependencies: -

Author

Austin Mallar
May 27, 2020

Made with

HTML / CSS (SCSS)

About a code

CSS Creative Pencil

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

Responsive: no

Dependencies: -

Author

Jon Kantner
April 24, 2020

Made with

HTML / CSS

About a code

Unboxing

A CSS looping animation where a box pops out of another that’s about to shrink into nothing, opens, then lands to shrink like the other box.

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

Responsive: yes

Dependencies: -

Author

Jhey
March 18, 2020

Made with

HTML (Pug) / CSS (Stylus)

About a code

CSS Flippy Loader

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

Responsive: no

Dependencies: -

Author

Lynn Fisher
March 3, 2020

Made with

HTML / CSS (Stylus)

About a code

CSS Circles Loading Animation

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

Responsive: no

Dependencies: -

Author

Jon Kantner
February 6, 2020

Made with

HTML (Pug) / CSS (Sass)

About a code

Text Ring Loading Animation

A loading animation where the text "Loading…" is written around the edge of two spinning CSS 3D rings.

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

Responsive: yes

Dependencies: -

Author

Andreas Storm
January 30, 2020

Made with

HTML (Pug) / CSS (Stylus)

About a code

Tea loading

Tea loading with SVG animation.

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

Responsive: no

Dependencies: -

Author

Prathamesh Koshti
November 30, 2019

Made with

HTML / CSS

About a code

Loading Animation

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

Responsive: yes

Dependencies: -

Author

UCanCode
November 7, 2019

Made with

HTML / CSS

About a code

Wave Loader Animation

Pure CSS wave loader animation.

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

Responsive: no

Dependencies: -

Author

Rafaela Lucas
October 29, 2019

Made with

HTML / CSS (SCSS)

About a code

CSS Loading

Pure CSS animated loader.

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

Responsive: no

Dependencies: -

Author

Prathamesh Koshti
October 18, 2019

Made with

HTML / CSS

About a code

CSS Loader Animation

Only CSS light loader with animation.

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

Responsive: no

Dependencies: -

Author

Aaron Iker
October 10, 2019

Made with

HTML (Pug) / CSS (SCSS)

About a code

Book Loader

CSS only book loader.

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

Responsive: no

Dependencies: -

Author

alphardex
October 6, 2019

Made with

HTML / CSS (SCSS)

About a code

Staggered Wave Loading

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

Responsive: no

Dependencies: -

Author

Jhey
October 4, 2019

Made with

HTML (Pug) / CSS (SCSS)

About a code

CSS Push Pop Loaders

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

Responsive: no

Dependencies: -

Author

Aaron Iker
September 27, 2019

Made with

HTML (Pug) / CSS (SCSS)

About a code

3D Boxes Loader CSS Only

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

Responsive: no

Dependencies: -

Author

Arturo Cabrera
September 25, 2019

Made with

HTML / CSS

About a code

Deleting Loader Pure CSS

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

Responsive: no

Dependencies: -

Author

Aaron Iker
September 23, 2019

Made with

HTML (Pug) / CSS (SCSS)

About a code

Pure CSS Book Loader

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

Responsive: no

Dependencies: -

Author

CurleyWebDev
September 18, 2019

Made with

HTML / CSS

About a code

CSS Loading Animation

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

Responsive: no

Dependencies: -

Author

Sandip Dust
September 4, 2019

Made with

HTML / CSS

About a code

Flipping Loading Text

Animated 3D Flipping Loading Text.

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

Responsive: no

Dependencies: -

Author

Jules Forrest
August 20, 2019

Made with

HTML / CSS

About a code

Arrows Loader CSS

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

Responsive: no

Dependencies: -

Author

Katherine Kato
August 19, 2019

Made with

HTML / CSS (SCSS)

About a code

Loading

Another idea for loading animation.

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

Responsive: no

Dependencies: -

Author

Ahmad Emran
August 1, 2019

Made with

HTML / CSS

About a code

CSS Loading Animation

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

Responsive: no

Dependencies: -

Author

Dario Corsi
July 25, 2019

Made with

HTML / CSS

About a code

Single Element Rainbow Loader

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

Responsive: yes

Dependencies: -

Author

CChuan
July 18, 2019

Made with

HTML (Pug) / CSS (Sass)

About a code

Floating Bottle Loader

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

Responsive: yes

Dependencies: -

Author

Daniel Subat
July 13, 2019

Made with

HTML / CSS (SCSS)

About a code

Gooey Loader

Gooey loader: a fluid color experiment with SVG filter.

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

Responsive: no

Dependencies: -

Author

Adam Dipinto
July 4, 2019

Made with

HTML / CSS

About a code

Loading Animation 3

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

Responsive: no

Dependencies: -

Author

Rafaela Lucas
May 20, 2019

Made with

HTML / CSS (SCSS)

About a code

Pure CSS Planet Loader Animation

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

Responsive: no

Dependencies: -

Author

Ahmad Emran
May 13, 2019

Made with

HTML / CSS

About a code

Loading Screen

Awesome loading screen using only HTML & CSS.

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

Responsive: no

Dependencies: -

Author

urielgold
March 20, 2019

Made with

HTML / CSS (SCSS)

About a code

AI Loader

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

Responsive: no

Dependencies: -

Author

Chris Smith
March 22, 2019

Made with

HTML / CSS (SCSS)

About a code

Loading Bar

Another CSS loading animation.

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

Responsive: yes

Dependencies: -

Author

Garet McKinley
February 7, 2019

Made with

HTML / CSS

About a code

Single Element Planet Loader

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

Responsive: no

Dependencies: -

Author

Ana Tudor
February 5, 2019

Made with

HTML (Pug) / CSS (SCSS)

About the code

Donut Loader Animation

Pure CSS bubbles float in 🍩 loader animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

Aaron Iker
January 21, 2019

Made with

HTML / CSS (SCSS)

About the code

Loaders

Some simple loaders with minimal HTML, CSS.

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

Responsive: yes

Dependencies: -

Author

Oleg Frolov
January 14, 2019

Made with

HTML (Pug) / CSS (Stylus)

About the code

Loader XLVI

Infinite loader UX exploration. Made with pure CSS.

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

Responsive: yes

Dependencies: -

Author

ilithya
January 12, 2018

Made with

HTML (Pug) / CSS (SCSS)

About the code

Bubble Gum Loader

Responsive pure CSS simple loader. Resize loader by only editing one variable. With vmin unit, loader is automatically responsive.

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

Responsive: yes

Dependencies: -

Author

Yoav Kadosh
December 4, 2018

Made with

HTML / CSS (SCSS)

About the code

Escalade Loader

Pure CSS escalade loader.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

Aaron Iker
November 16, 2018

Made with

HTML / CSS (SCSS) / JavaScript

About the code

Infinity Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

Mamun Khandaker
November 15, 2018

Made with

HTML / CSS (SCSS)

About a code

Rocket Loader

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

Responsive: no

Dependencies: -

Author

matt henley
November 13, 2018

Made with

HTML / CSS

About the code

Flat Loading Icon

A different take on the loading icon. HTML and CSS.

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

Responsive: yes

Dependencies: -

Author

Aaron Iker
November 10, 2018

Made with

HTML / CSS (SCSS)

About the code

Loading Boxes 3D

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

Akshay
November 9, 2018

Made with

HTML (Pug) / CSS (Sass)

About the code

Domino Preloader

Domino preloader in HTML and CSS.

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

Responsive: yes

Dependencies: -

Author

Emma Follender
November 9, 2018

Made with

HTML (Pug) / CSS (Stylus)

About the code

Loading Windows

Nice Windows loading in pure CSS.

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

Responsive: yes

Dependencies: -

Author

Pieter Biesemans
November 5, 2018

Made with

HTML / CSS (SCSS)

About the code

Responsive Preloader

Three dot animated responsive preloader.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

Maxime Nory
October 11, 2018

Made with

HTML (Pug) / CSS (SCSS)

About a code

Gooey Loader

Simple gooey loader using SVG filters.

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

Responsive: no

Dependencies: -

Author

Adam Kuhn
October 8, 2018

Made with

HTML (Haml) / CSS (SCSS)

About the code

Bounce Loader

Bounce loader in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

Andreas Storm
October 4, 2018

Made with

HTML / CSS (Stylus)

About the code

Newton Loader

Pure CSS loader with minimal code.

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

Responsive: yes

Dependencies: -

Author

Zed Dash
October 2, 2018

Made with

HTML / CSS (SCSS)

About the code

Loading...

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

Responsive: yes

Dependencies: -

Author

Adam Kuhn
September 24, 2018

Made with

HTML (Haml) / CSS (SCSS)

About the code

Candela Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

Amli
September 14, 2018

Made with

HTML / CSS

About the code

Google Loader

Google Loader by using only CSS. No image & SVG.

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

Responsive: yes

Dependencies: -

Author

0guzhan
September 5, 2018

Made with

HTML / CSS (SCSS)

About the code

CSS Loader

Pure CSS loader.

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

Responsive: yes

Dependencies: -

Author

Metty
August 16, 2018

Made with

HTML / CSS

About the code

Codebox Loader

Codebox loader with Font Awesome icons.

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

Responsive: yes

Dependencies: font-awesome.css

Author

Comehope
August 7, 2018

Made with

HTML / CSS

About the code

Roller Coaster Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

Melissa Em
August 5, 2018

Made with

HTML / CSS (SCSS)

About the code

CSS Bouncy Loader

CSS bouncy loader (using clip-path where supported).

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

Kumar Sidharth
August 5, 2018

Made with

HTML / CSS

About the code

Simple Loading

HTML and CSS simple loading animation.

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

Responsive: yes

Dependencies: -

Author

Vladimir
July 30, 2018

Made with

HTML (Pug) / CSS (Sass)

About the code

Preloader

Preloader in HTML and CSS.

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

Responsive: no

Dependencies: -

Author

Praveen Bisht
July 12, 2018

Made with

HTML (Pug) / CSS (SCSS)

About the code

Matrix Wave Loading Animation

Matrix wave loading animation in HTML and CSS.

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

Responsive: yes

Dependencies: -

Author

Andreas Storm
July 11, 2018

Made with

HTML (Pug) / CSS (Stylus)

About the code

Loading ...

Pure CSS loading animation.

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

Responsive: yes

Dependencies: -

Author

IlyasR
July 10, 2018

Made with

HTML / CSS

About the code

SVG Square Loader Concept

Square loader concept with SVG, HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

Comehope
June 29, 2018

Made with

HTML / CSS

About the code

Swaying Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

Maxime Rossignol
June 23, 2018

Made with

HTML / CSS (SCSS)

About the code

The Glowing Loader

The glowing loader with pure CSS animation.

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

Responsive: no

Dependencies: bootstrap.css

Author

Decatron
May 6, 2018

Made with

HTML
CSS

About the code

Gooey CSS Loader

Pure CSS gooey loader.

Author

Ana Tudor
May 4, 2018

Made with

HTML/Pug
CSS

About the code

SVG ∞ loader

No JS, cross-browser, minimal code. 20 lines of CSS and 4 lines of generated SVG.

Author

Ana Tudor
April 26, 2018

Made with

HTML/Pug
CSS/SCSS

About the code

Tomato Loader With CSS Vars

Doesn't work in Edge due to lack of support for calc() as an animation-delay value.

Author

Cassidy Williams
April 23, 2018

Made with

HTML
CSS

About the code

CSS Dash Loader

Rotating dashes.

Author

Irem Lopsum
April 15, 2018

Made with

HTML
CSS/SCSS

About the code

CSS Loader

Material inspired loader.

Author

Sasha
April 2, 2018

Made with

HTML / CSS (SCSS)

About the code

Loader #11

Cool loader in HTML and CSS.

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

Responsive: yes

Dependencies: -

Author

Sasha
March 7, 2018

Made with

HTML
CSS/SCSS

About the code

Loader #4

Simple loader.

Author

Nikhil Krishnan
March 6, 2018

Made with

HTML
CSS/SCSS

About the code

Swing Masking Loader

Swing masking loader from an experiment lab.

Author

Adam Kuhn
February 26, 2018

Made with

HTML/Haml
CSS/SCSS

About the code

Pattern Loader

Pretty CSS pattern loader.

Author

Cody Ogden
February 13, 2018

Made with

HTML / CSS (SCSS)

About the code

Magic Burrito

Loading burrito...

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

Responsive: yes

Dependencies: -

Author

Idan Gazit
January 2, 2018

Made with

HTML
CSS/SCSS

About the code

Fancy Loader

Pure CSS fancy loader.

Author

RomainFieve
September 26, 2017

Made with

HTML / CSS (SCSS)

About the code

Gooey SVG Loaders

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

Responsive: yes

Dependencies: -

Author

Joshua Ward
September 22, 2017

Made with

HTML
CSS/SCSS

About the code

Fun Little Loader

HTML and CSS fun little loader.

Author

Dom
08.09.2017

Made with

HTML
CSS

About the code

Preloaders

HTML and CSS preloaders.

Author

Elior Tabeka
01.09.2017

Made with

HTML
CSS/SCSS

About the code

Goo Loader

Pure CSS goo loader.

Author

Alexandr Izumenko
29.08.2017

Made with

HTML
CSS

About the code

Loader

Simple HTML and CSS loader.

Author

Animated Creativity
28.08.2017

Made with

HTML
CSS/SCSS

About the code

Rotating Circles Preloader

A beautiful preloader with rotating circles. Pure CSS.

Author

foleyatwork
24.08.2017

Made with

HTML
CSS
JavaScript

About the code

Illuminati-Rainbow Loading

Rainbow loading with HTML, CSS and JS.

Author

Animated Creativity
20.08.2017

Made with

HTML
CSS/SCSS
JavaScript

About the code

Animated FlipPreloader

An awesome flip preloader made in CSS. Colors are fully logical on flip. Any colors can be set easily.

Author

Chris Gannon
04.08.2017

Made with

HTML
CSS
JavaScript (bodymovin.js)

About the code

Play Fill Loader

Smooth play fill loader with HTML, CSS and JavaScript.

Author

Chris Gannon
21.07.2017

Made with

HTML
CSS
JavaScript (bodymovin.js)

About the code

LEGO Loader

Everybody loves LEGO and nobody likes waiting.

Author

Anya Melnyk
16.07.2017

Made with

HTML
CSS

About the code

Page Loaders

Page loaders pure CSS.

Author

Mario Duarte
14.07.2017

Made with

HTML
CSS/SCSS

About the code

Floating Loading Animation

Simple floating loading animation mas with CSS in a flat design feel.

Author

Shak Daniel
12.07.2017

Made with

HTML
CSS/Stylus

About the code

Cute Loading

Pure CSS loading animation.

Author

Andreas Storm
10.07.2017

Made with

HTML
CSS/Stylus

About the code

Abstract Activity Indicator

HTML and CSS loading indicator.

Author

fox_hover
29.06.2017

Made with

HTML
CSS/SCSS

About the code

CSS3 Animation Preloaders

CSS3 animations preloaders, no JS, no images.

Author

Anastasiya Kuligina
29.06.2017

Made with

HTML
CSS

About the code

New Preloader

Amazing loader in very few lines.

Author

Adam Kuhn
22.06.2017

Made with

HTML/Haml
CSS/SCSS

About the code

🐝 & 💣 rotator

Bees and bombs rotator.

Author

Oliver Holretz
09.06.2017

Made with

HTML
CSS/SCSS

About the code

Loader

Pure CSS loader.

Author

fox_hover
29.04.2017

Made with

HTML
CSS/SCSS

About the code

CSS3 Animations Loaders

CSS3 animated loaders vol.1.

Author

Paolo Duzioni
April 3, 2017

Made with

HTML
CSS/Sass

About the code

Dicey Loader With Flexbox

A loading animation to discover the foundamentals of flexbox axes and positioning.

Preloader With Anime.js

HTML/CSS preloader with Anime.js.
Made by Kevin Konrad
February 25, 2017

download demo and code

Jelly Box

Pure CSS jelly box loader.
Made by Fabrizio Bianchi
February 6, 2017

download demo and code

Spring Loader

HTML and CSS spring loader.
Made by Fabrizio Bianchi
February 6, 2017

download demo and code

Elite Dangerous Inspired Loader

Pure CSS loader.
Made by James Panter
January 19, 2017

download demo and code

CSS Preloader

HTML and CSS preloader.
Made by massimo
December 31, 2016

download demo and code

Color Blend Loader Animation

Loading animation utilizing blend modes and linear gradients.
Made by Ryan
December 15, 2016

download demo and code

Making Pancake Loader

Yet another silly loader ;)
Made by Pawel
December 12, 2016

download demo and code

Never-Ending Box

Simple CSS animation. Could be used as a loader.
Made by Pawel
December 9, 2016

download demo and code

One div Loading

A simple "1 div" element loader collection.
Made by iGadget
December 2, 2016

download demo and code

Loader

HTML and CSS loader with audio.
Made by Chandan Choudhary
November 25, 2016

download demo and code

Redirecting Loader

Animated loader when redirecting a user to another page.
Made by Mr Alien
November 21, 2016

download demo and code

Author

qpoziomek
October 20, 2016

Made with

HTML / CSS

About the code

Squares Loader

Pretty pure CSS squares loader.

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

Responsive: yes

Dependencies: -

Author

igor0ser
September 23, 2016

Made with

HTML
CSS/Sass

About the code

Car Preloader

Pure CSS car preloader.

Wineshop Loader

Another idea for the loader.
Made by Elena Nazarova
September 3, 2016

download demo and code

Whooooooop Loader

Fully customizable and simple CSS-only loader.
Made by Slava
August 30, 2016

download demo and code

Loader #4

HTML and CSS loader #4.
Made by Stix
August 27, 2016

download demo and code

CSS3 Transform Loader - Squareception

Small squares become a bigger square which then becomes a small square which is part of a bigger square which then becomes a small square which is part of a bigger square which then becomes a small square which is part of a bigger square which then becomes a small square...
Made by Les
August 23, 2016

download demo and code

HTML And CSS Loader

Pure CSS loader.
Made by Håvard Brynjulfsen
June 17, 2016

download demo and code

Cube Flipping Loader

CSS simple cube flip loading animation.
Made by Nikhil Krishnan
June 8, 2016

download demo and code

CSS Loading

A CSS only loading thing.
Made by Ally Baird
May 28, 2016

download

Author

Jhey
May 15, 2016

Made with

HTML (Pug) / CSS (Stylus)

About a code

Box-Shadow Pseudo Loaders

Leveraging the use of box-shadow to create interesting loading effects with just pseudo elements. Just by adding a class to an element you can get a cool loading animation in an overlay.

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

Responsive: no

Dependencies: -

Loading

HTML, CSS and JavaScript loader.
Made by
May 10, 2016

download demo and code

The Division Website Loader

The loading animation that Ubisoft's The Division uses when the website loads a new page. However, they use an animated gif. This animation uses Canvas and JavaScript.
Made by Jeremy Wynn
April 22, 2016

download demo and code

Code Loader

"Code" loader with HTML and CSS.
Made by Andrey Shchekin
April 19, 2016

download demo and code

Loading Animation

HTML and CSS loading animation.
Made by John Heiner
February 22, 2016

download demo and code

Author

Axel Michel
March 23, 2016

Made with

HTML / CSS

About a code

Loader

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

Responsive: yes

Dependencies: -

CSS Stairs Loader

CSS only stairs loader.
Made by Irko Palenius
February 12, 2016

download demo and code

CSS3 Loading

Colorful pure css loader with only two elements.
Made by Iván Villamil
January 22, 2016

download demo and code

CSS Loaders

Pure CSS flat loaders.
Made by Jordano Aragão
January 7, 2016

download demo and code

CSS3 Infinite Loader

Infinite loader made with CSS3 and HTML.
Made by Jonathan Silva
November 13, 2015

download demo and code

Bookshelf Loader

A nice moving bookshelf animation done only with CSS animations.
Made by Grélard Antoine
November 6, 2015

download demo and code

Loading Animation CSS

Text blur animation CSS(SCSS) only.
Made by Tatsuya Azegami
October 29, 2015

download demo and code

Pure CSS Loader

A very simple warframe style pure CSS loader.
Made by Izzy Skye
October 26, 2015

download demo and code

Glitchy Loading Indicator

Glitchy loading indicator with HTML, CSS and JavaScript.
Made by Jack Rugile
September 4, 2015

download demo and code

CSS3 Loader - Audio Effect

CSS3 Loader. Created for LaBanane application: labanane.no-ip.info
Made by Boris Graeff
September 3, 2015

download

Neon Grid Loaders

4 variations of a loading indicator using the same flexbox grid system.
Made by Mai El-Awini
July 25, 2015

download demo and code

Simple CSS Loader

Pure CSS, simple, performance-oriented loader.
Made by Henry
July 13, 2015

download demo and code

Pure CSS3 3D Flipbook Loader

Been experimenting with CSS 3D transforms.
Made by Josh Hillier
June 2, 2015

download demo and code

Preloader Animation

HTML/CSS preloader animation.
Made by Devilish Alchemist
June 1, 2015

download demo and code

Cupcake - A Simple, Minimal Loader

Best viewed in full screen.
Made by Prayush S
May 15, 2015

download demo and code

Two Cube Loader

HTML and CSS loader.
Made by Bennett Feely
May 14, 2015

download demo and code

Square Loader

A minimal loader with rotating square.
Made by Tashfeen Ahmad
April 11, 2015

download demo and code

Fire Loader

HTML and CSS fire loader.
Made by White Wolf Wizard
April 10, 2015

download

8 Bit Loader

Pixelated circular loader with box-shadow.
Made by Fabrizio Bianchi
March 23, 2015

download demo and code

Infinite Domino Loader

This pen shows a set of white bars—who represent dominos—that fall to the right; like dominos. You should set aria-busy to false when your stuff is loaded.
Made by Michiel Bijl
March 3, 2015

download demo and code

Pulse Loader

HTML and CSS loader for DJ pulse.
Made by adam
February 27, 2015

download demo and code

Hand Animation - Loading

Pure CSS loading animation.
Made by r4ms3s
February 23, 2015

download demo and code

CSS Loader

Delete class float or shadow for another style.
Made by Jeroen
November 13, 2014

download demo and code

Level Loader Dribbble Port

Haml, Sass, animations, looped animation delays, Dribbble port.
Made by Alex
November 7, 2014

download demo and code

Flexbox Loader

Simple flexbox loader.
Made by wontem
October 22, 2014

download demo and code

Pong Loader

Single element pong loader.
Made by George Hastings
August 28, 2014

download demo and code

Equalizes The Loader

Use of animation based on border-width only + the useful Sass loop to delay all our components. Equalizer style!
Made by Caohim
August 12, 2014

download demo and code

CSS3 Loader

HTML and CSS loader.
Made by Salmen Bejaoui
June 16, 2014

download demo and code

VSCO Loader

HTML and CSS VSCO loader.
Made by Andreas Gillström
May 30, 2014

download demo and code

CSS Preloader

HTML and CSS preloader.
Made by Sébastien Olivier
April 18, 2014

download demo and code

Loader CSS3

HTML and CSS loader.
Made by Mathieu Richard
February 14, 2014

download demo and code

Author

Dean
February 8, 2014

Made with

HTML / CSS (SCSS)

About a code

Olympic Story CSS3 Loader

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

Responsive: no

Dependencies: -

Author

Eric Huguenin
January 21, 2014

Made with

HTML / CSS

About a code

Loader

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

Responsive: no

Dependencies: -

CSS3 Loader Animation - Peeek

This is the loader animation that designed by Mikael Edwards and developed by Rıza Selçuk Saydam for Peeek.
Made by Rıza Selçuk Saydam
October 30, 2013

download demo and code

Author

Tim Holman
August 12, 2013

Made with

HTML / CSS (SCSS)

About a code

Authentic Weather Loader

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

Responsive: no

Dependencies: -

CSS Animated Loader

Just another CSS loader.
Made by Christofer Vilander
June 27, 2013

download demo and code

Related Articles

Author

Links

Made with

About a code

3D Loader Cube

Author

Links

Made with

About a code

Bicycle Preloader

Author

Links

Made with

About a code

Building Loader CSS

Author

Links

Made with

About a code

CodePen Loader

Author

Links

Made with

About a code

LEGO Preloader

Author

Links

Made with

About a code

Infinity Preloader

Author

Links

Made with

About a code

CSS Bar Loader

Author

Links

Made with

About a code

CSS Rainbow Cuboid Loader

Author

Links

Made with

About a code

CSS Crazy Loading Arches

Author

Links

Made with

About a code

Tap for Perspective Loading with CSS

Author

Links

Made with

About a code

Ice Pop Loader

Author

Links

Made with

About a code

Shopping Cart Preloader

Author

Links

Made with

About a code

Bouncing Cube Loader

Author

Links

Made with

About a code

Loading

Author

Links

Made with

About a code

3D Preloader

Author

Links

Made with

About a code