54 CSS Loaders

March 3, 2017

Collection of HTML and CSS loader animation. Demo and download code (*zip).

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

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 Spinner
Demo Image: CSS3 Loading Spinner

CSS3 Loading Spinner

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 Spinner
Demo Image: 8 Bit Spinner

8 Bit Spinner

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

FreeFrontend © 2016 - 2017