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

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

Author

  • Ana Tudor

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

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

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

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

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

Made with

  • HTML / CSS (SCSS) / JavaScript

About the code

Infinity Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • matt henley

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

Made with

  • HTML / CSS (SCSS)

About the code

Loading Boxes 3D

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Akshay

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

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

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

  • Adam Kuhn

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

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

Made with

  • HTML / CSS (SCSS)

About the code

Loading...

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

Responsive: yes

Dependencies: -

Author

  • Adam Kuhn

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Candela Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Amli

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

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

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

Made with

  • HTML / CSS

About the code

Roller Coaster Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Melissa Em

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

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

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

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

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

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

Made with

  • HTML / CSS

About the code

Swaying Loader

Compatible browsers: Chrome, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • Maxime Rossignol

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

Demo image: Gooey CSS Loader

Author

  • Decatron

Made with

  • HTML
  • CSS

About the code

Gooey CSS Loader

Pure CSS gooey loader.

Demo image: SVG ∞ loader

Author

  • Ana Tudor

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.

Demo image: Tomato Loader With CSS Vars

Author

  • Ana Tudor

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.

Demo image: CSS Dash Loader

Author

  • Cassidy Williams

Made with

  • HTML
  • CSS

About the code

CSS Dash Loader

Rotating dashes.

Demo image: CSS Loader

Author

  • Irem Lopsum

Made with

  • HTML
  • CSS/SCSS

About the code

CSS Loader

Material inspired loader.

Author

  • Sasha

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

Demo image: Loader #4

Author

  • Sasha

Made with

  • HTML
  • CSS/SCSS

About the code

Loader #4

Simple loader.

Demo image: Swing Masking Loader

Author

  • Nikhil Krishnan

Made with

  • HTML
  • CSS/SCSS

About the code

Swing Masking Loader

Swing masking loader from an experiment lab.

Demo image: Pattern Loader

Author

  • Adam Kuhn

Made with

  • HTML/Haml
  • CSS/SCSS

About the code

Pattern Loader

Pretty CSS pattern loader.

Author

  • Cody Ogden

Made with

  • HTML / CSS (SCSS)

About the code

Magic Burrito

Loading burrito...

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

Responsive: yes

Dependencies: -

Demo image: A Fancy Loader

Author

  • Idan Gazit

Made with

  • HTML
  • CSS/SCSS

About the code

Fancy Loader

Pure CSS fancy loader.

Author

  • RomainFieve

Made with

  • HTML / CSS (SCSS)

About the code

Gooey SVG Loaders

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

Responsive: yes

Dependencies: -

Demo image: Fun Little Loader

Author

  • Joshua Ward

Made with

  • HTML
  • CSS/SCSS

About the code

Fun Little Loader

HTML and CSS fun little loader.

Demo Image: Preloaders

Author

  • Dom
  • 08.09.2017

Made with

  • HTML
  • CSS

About the code

Preloaders

HTML and CSS preloaders.

Demo Image: Goo Loader

Author

  • Elior Tabeka
  • 01.09.2017

Made with

  • HTML
  • CSS/SCSS

About the code

Goo Loader

Pure CSS goo loader.

Demo Image: Loader

Author

  • Alexandr Izumenko
  • 29.08.2017

Made with

  • HTML
  • CSS

About the code

Loader

Simple HTML and CSS loader.

Demo Image: Rotating Circles Preloader

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.

Demo Image: Illuminati-Rainbow Loading

Author

  • foleyatwork
  • 24.08.2017

Made with

  • HTML
  • CSS
  • JavaScript

About the code

Illuminati-Rainbow Loading

Rainbow loading with HTML, CSS and JS.

Demo Image: Animated FlipPreloader

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.

Demo Image: Play Fill Loader

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.

Demo Image: LEGO Loader

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.

Demo Image: Page Loaders

Author

  • Anya Melnyk
  • 16.07.2017

Made with

  • HTML
  • CSS

About the code

Page Loaders

Page loaders pure CSS.

Demo Image: Floating Loading Animation

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.

Demo Image: Cute Loading

Author

  • Shak Daniel
  • 12.07.2017

Made with

  • HTML
  • CSS/Stylus

About the code

Cute Loading

Pure CSS loading animation.

Demo Image: Abstract Activity Indicator

Author

  • Andreas Storm
  • 10.07.2017

Made with

  • HTML
  • CSS/Stylus

About the code

Abstract Activity Indicator

HTML and CSS loading indicator.

Demo Image: CSS3 Animation Preloaders

Author

  • fox_hover
  • 29.06.2017

Made with

  • HTML
  • CSS/SCSS

About the code

CSS3 Animation Preloaders

CSS3 animations preloaders, no JS, no images.

Demo Image: New Preloader

Author

  • Anastasiya Kuligina
  • 29.06.2017

Made with

  • HTML
  • CSS

About the code

New Preloader

Amazing loader in very few lines.

Demo Image: 🐝 & 💣 rotator

Author

  • Adam Kuhn
  • 22.06.2017

Made with

  • HTML/Haml
  • CSS/SCSS

About the code

🐝 & 💣 rotator

Bees and bombs rotator.

Demo Image: Loader

Author

  • Oliver Holretz
  • 09.06.2017

Made with

  • HTML
  • CSS/SCSS

About the code

Loader

Pure CSS loader.

Demo Image: CSS3 Animations Loaders

Author

  • fox_hover
  • 29.04.2017

Made with

  • HTML
  • CSS/SCSS

About the code

CSS3 Animations Loaders

CSS3 animated loaders vol.1.

Demo image: Dicey Loader With Flexbox

Author

  • Paolo Duzioni

Made with

  • HTML
  • CSS/Sass

About the code

Dicey Loader With Flexbox

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

Demo Image: Preloader With Anime.js
Demo Image: Preloader With Anime.js

Preloader With Anime.js

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

Demo Image: Jelly Box
Demo Image: Jelly Box

Jelly Box

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

Demo Image: Spring Loader
Demo Image: Spring Loader

Spring Loader

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

Demo Image: Elite Dangerous Inspired Loader - Pure CSS
Demo Image: Elite Dangerous Inspired Loader - Pure CSS

Elite Dangerous Inspired Loader

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

Demo Image: CSS Preloader
Demo Image: CSS Preloader

CSS Preloader

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

Demo Image: Color Blend Loader Animation
Demo Image: Color Blend Loader Animation

Color Blend Loader Animation

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

Demo Image: Making pancake loader
Demo Image: Making pancake loader

Making Pancake Loader

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

Demo Image: Never-Ending Box
Demo Image: Never-Ending Box

Never-Ending Box

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

Demo Image: One div Loading
Demo Image: One div Loading

One div Loading

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

Demo Image: Loader
Demo Image: Loader

Loader

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

Demo Image: Redirecting Loader
Demo Image: Redirecting Loader

Redirecting Loader

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

Author

  • qpoziomek

Made with

  • HTML / CSS

About the code

Squares Loader

Pretty pure CSS squares loader.

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

Responsive: yes

Dependencies: -

Demo image: Car Preloader

Author

  • igor0ser

Made with

  • HTML
  • CSS/Sass

About the code

Car Preloader

Pure CSS car preloader.

Demo Image: Wineshop Loader
Demo Image: Wineshop Loader

Wineshop Loader

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

Demo Image: Whooooooop Loader
Demo Image: Whooooooop Loader

Whooooooop Loader

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

Demo Image: Loader #4
Demo Image: Loader #4

Loader #4

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

Demo Image: CSS3 Transform Loader - Squareception
Demo Image: CSS3 Transform Loader - Squareception

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

Demo Image: HTML And CSS Loader
Demo Image: HTML And CSS Loader

HTML And CSS Loader

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

Demo Image: Cube Flipping Loader
Demo Image: Cube Flipping Loader

Cube Flipping Loader

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

Demo Image: CSS Loading
Demo Image: CSS Loading

CSS Loading

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

Demo Image: Loading
Demo Image: Loading

Loading

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

Demo Image: The Division Website Loader
Demo Image: The Division Website Loader

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

Demo Image: Code Loader
Demo Image: Code Loader

Code Loader

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

Demo Image: Loading Animation
Demo Image: Loading Animation

Loading Animation

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

Demo Image: CSS Stairs Loader
Demo Image: CSS Stairs Loader

CSS Stairs Loader

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

Demo Image: CSS3 Loading
Demo Image: CSS3 Loading

CSS3 Loading

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

Demo Image: CSS Loaders
Demo Image: CSS Loaders

CSS Loaders

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

Demo Image: CSS3 Infinite Loader
Demo Image: CSS3 Infinite Loader

CSS3 Infinite Loader

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

Demo Image: Bookshelf Loader
Demo Image: Bookshelf Loader

Bookshelf Loader

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

Demo Image: Loading Animation CSS
Demo Image: Loading Animation CSS

Loading Animation CSS

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

Demo Image: Pure CSS Loader
Demo Image: Pure CSS Loader

Pure CSS Loader

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

Demo Image: Glitchy Loading Indicator
Demo Image: Glitchy Loading Indicator

Glitchy Loading Indicator

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

Demo Image: CSS3 Loader - Audio Effect
Demo Image: CSS3 Loader - Audio Effect

CSS3 Loader - Audio Effect

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

Demo Image: Neon Grid Loaders
Demo Image: Neon Grid Loaders

Neon Grid Loaders

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

Demo Image: Simple CSS Loader
Demo Image: Simple CSS Loader

Simple CSS Loader

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

Demo Image: Pure CSS3 3D Flipbook Loader
Demo Image: Pure CSS3 3D Flipbook Loader

Pure CSS3 3D Flipbook Loader

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

Demo Image: Preloader Animation
Demo Image: Preloader Animation

Preloader Animation

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

Demo Image: Cupcake - A Simple, Minimal Loader
Demo Image: Cupcake - A Simple, Minimal Loader

Cupcake - A Simple, Minimal Loader

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

Demo Image: Two Cube Loader
Demo Image: Two Cube Loader

Two Cube Loader

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

Demo Image: Square Loader
Demo Image: Square Loader

Square Loader

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

Demo Image: Fire Loader
Demo Image: Fire Loader

Fire Loader

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

Demo Image: 8 Bit Loader
Demo Image: 8 Bit Loader

8 Bit Loader

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

Demo Image: Infinite Domino Loader
Demo Image: Infinite Domino Loader

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

Demo Image: Pulse Loader
Demo Image: Pulse Loader

Pulse Loader

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

Demo Image: Hand Animation - Loading
Demo Image: Hand Animation - Loading

Hand Animation - Loading

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

Demo Image: CSS Loader
Demo Image: CSS Loader

CSS Loader

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

Demo Image: Level Loader Dribbble Port
Demo Image: Level Loader Dribbble Port

Level Loader Dribbble Port

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

Demo Image: Flexbox Loader
Demo Image: Flexbox Loader

Flexbox Loader

Simple flexbox loader.
Made by wontem
October 22, 2014

Demo Image: Pong Loader
Demo Image: Pong Loader

Pong Loader

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

Demo Image: Equalizes The Loader
Demo Image: Equalizes The Loader

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

Demo Image: CSS3 Loader
Demo Image: CSS3 Loader

CSS3 Loader

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

Demo Image: VSCO Loader
Demo Image: VSCO Loader

VSCO Loader

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

Demo Image: CSS Preloader
Demo Image: CSS Preloader

CSS Preloader

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

Demo Image: Loader CSS3
Demo Image: Loader CSS3

Loader CSS3

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

Demo Image: CSS3 Loader Animation - Peeek
Demo Image: CSS3 Loader Animation - Peeek

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

Demo Image: CSS Animated Loader
Demo Image: CSS Animated Loader

CSS Animated Loader

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

back to top