114 CSS Loaders

Collection of HTML and CSS loader animation for website. Update of May 2018 collection. 31 new examples.

Related Articles

1. CSS Spinners

About the code

Donut Loader Animation

Pure CSS bubbles float in 🍩 loader animation.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Loaders

some simple loaders with minimal HTML, CSS.

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

Responsive: yes

Dependencies: -

About the code

Loader XLVI

Infinite loader UX exploration. Made with pure CSS.

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

Responsive: yes

Dependencies: -

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

About the code

Escalade Loader

Pure CSS escalade loader.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Infinity Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

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

About the code

Loading Boxes 3D

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Domino Preloader

Domino preloader in HTML and CSS.

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

Responsive: yes

Dependencies: -

About the code

Loading Windows

Nice Windows loading in pure CSS.

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

Responsive: yes

Dependencies: -

About the code

Responsive Preloader

Three dot animated responsive preloader.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Bounce Loader

Bounce loader in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Newton Loader

Pure CSS loader with minimal code.

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

Responsive: yes

Dependencies: -

About the code

Loading...

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

Responsive: yes

Dependencies: -

About the code

Candela Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Google Loader

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

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

Responsive: yes

Dependencies: -

About the code

CSS Loader

Pure CSS loader.

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

Responsive: yes

Dependencies: -

About the code

Codebox Loader

Codebox loader with Font Awesome icons.

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

Responsive: yes

Dependencies: font-awesome.css

About the code

Roller Coaster Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

CSS Bouncy Loader

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Simple Loading

HTML and CSS simple loading animation.

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

Responsive: yes

Dependencies: -

About the code

Preloader

Preloader in HTML and CSS.

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

Responsive: no

Dependencies: -

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

About the code

Loading ...

Pure CSS loading animation.

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

Responsive: yes

Dependencies: -

About the code

SVG Square Loader Concept

Square loader concept with SVG, HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Swaying Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

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

About the code

Gooey CSS Loader

Pure CSS gooey loader.

About the code

SVG ∞ loader

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

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.

About the code

CSS Dash Loader

Rotating dashes.

About the code

CSS Loader

Material inspired loader.

About the code

Loader #11

Cool loader in HTML and CSS.

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

Responsive: yes

Dependencies: -

About the code

Loader #4

Simple loader.

About the code

Swing Masking Loader

Swing masking loader from an experiment lab.

About the code

Pattern Loader

Pretty CSS pattern loader.

About the code

Magic Burrito

Loading burrito...

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

Responsive: yes

Dependencies: -

About the code

Fancy Loader

Pure CSS fancy loader.

About the code

Gooey SVG Loaders

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

Responsive: yes

Dependencies: -

About the code

Fun Little Loader

HTML and CSS fun little loader.

About the code

Preloaders

HTML and CSS preloaders.

About the code

Goo Loader

Pure CSS goo loader.

About the code

Loader

Simple HTML and CSS loader.

About the code

Rotating Circles Preloader

A beautiful preloader with rotating circles. Pure CSS.

About the code

Illuminati-Rainbow Loading

Rainbow loading with HTML, CSS and JS.

About the code

Animated FlipPreloader

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

About the code

Play Fill Loader

Smooth play fill loader with HTML, CSS and JavaScript.

About the code

LEGO Loader

Everybody loves LEGO and nobody likes waiting.

About the code

Page Loaders

Page loaders pure CSS.

About the code

Floating Loading Animation

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

About the code

Cute Loading

Pure CSS loading animation.

About the code

Abstract Activity Indicator

HTML and CSS loading indicator.

About the code

CSS3 Animation Preloaders

CSS3 animations preloaders, no JS, no images.

About the code

New Preloader

Amazing loader in very few lines.

About the code

🐝 & 💣 rotator

Bees and bombs rotator.

About the code

Loader

Pure CSS loader.

About the code

CSS3 Animations Loaders

CSS3 animated loaders vol.1.

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

Jelly Box

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

Spring Loader

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

Elite Dangerous Inspired Loader

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

CSS Preloader

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

Color Blend Loader Animation

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

Making Pancake Loader

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

Never-Ending Box

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

One div Loading

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

Loader

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

Redirecting Loader

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

About the code

Squares Loader

Pretty pure CSS squares loader.

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

Responsive: yes

Dependencies: -

About the code

Car Preloader

Pure CSS car preloader.

Wineshop Loader

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

Whooooooop Loader

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

Loader #4

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

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

HTML And CSS Loader

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

Cube Flipping Loader

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

CSS Loading

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

Loading

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

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

Code Loader

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

Loading Animation

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

CSS Stairs Loader

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

CSS3 Loading

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

CSS Loaders

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

CSS3 Infinite Loader

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

Bookshelf Loader

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

Loading Animation CSS

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

Pure CSS Loader

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

Glitchy Loading Indicator

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

CSS3 Loader - Audio Effect

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

Neon Grid Loaders

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

Simple CSS Loader

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

Pure CSS3 3D Flipbook Loader

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

Preloader Animation

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

Cupcake - A Simple, Minimal Loader

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

Two Cube Loader

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

Square Loader

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

Fire Loader

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

8 Bit Loader

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

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

Pulse Loader

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

Hand Animation - Loading

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

CSS Loader

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

Level Loader Dribbble Port

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

Flexbox Loader

Simple flexbox loader.
Made by wontem
October 22, 2014

Pong Loader

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

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

CSS3 Loader

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

VSCO Loader

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

CSS Preloader

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

Loader CSS3

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

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

CSS Animated Loader

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