FreeFrontend

CSS Loaders

March 03, 2017 | 23 Minute Read

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

Demo Image: Preloader With Anime.js
Preloader With Anime.js (demo image)

Preloader With Anime.js

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

download demo and code

See the Pen Preloader with Anime.js by Kevin Konrad (@kkhenriquez) on CodePen.

Demo Image: Jelly Box
Jelly Box (demo image)

Jelly Box

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

download demo and code

See the Pen Loader #6 - Jelly Box by Fabrizio Bianchi (@fbrz) on CodePen.

Demo Image: Spring Loader
Spring Loader (demo image)

Spring Loader

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

download demo and code

See the Pen Loader #4 - Spring by Fabrizio Bianchi (@fbrz) on CodePen.

Demo Image: Elite Dangerous Inspired Loader - Pure CSS
Elite Dangerous Inspired Loader - Pure CSS (demo image)

Elite Dangerous Inspired Loader

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

download demo and code
Demo Image: CSS Preloader
CSS Preloader (demo image)

CSS Preloader

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

download demo and code

See the Pen css preloader by massimo (@_massimo) on CodePen.

Demo Image: Color Blend Loader Animation
Color Blend Loader Animation (demo image)

Color Blend Loader Animation

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

download demo and code
Demo Image: Making pancake loader
Making pancake loader (demo image)

Making Pancake Loader

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

download demo and code

See the Pen 'Making pancake' loader by Pawel (@pawelqcm) on CodePen.

Demo Image: Never-Ending Box
Never-Ending Box (demo image)

Never-Ending Box

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

download demo and code

See the Pen Never-ending box by Pawel (@pawelqcm) on CodePen.

Demo Image: One div Loading
One div Loading (demo image)

One div Loading

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

download demo and code

See the Pen 1div Loading... [ongoing process] by iGadget (@iGadget) on CodePen.

Demo Image: Loader
Loader (demo image)

Loader

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

download demo and code

See the Pen Loader by Chandan Choudhary (@Cancepto) on CodePen.

Demo Image: Redirecting Loader
Redirecting Loader (demo image)

Redirecting Loader

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

download demo and code

See the Pen Redirecting Loader by Mr Alien (@mr_alien) on CodePen.

Demo Image: Wineshop Loader
Wineshop Loader (demo image)

Wineshop Loader

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

download demo and code

See the Pen wineshop loader by Elena Nazarova (@nazarelen) on CodePen.

Demo Image: Whooooooop Loader
Whooooooop Loader (demo image)

Whooooooop Loader

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

download demo and code

See the Pen Loader #1. Whooooooop by Slava (@SlavaZuryanov) on CodePen.

Demo Image: Loader #4
Loader #4 (demo image)

Loader #4

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

download demo and code

See the Pen Loader #4 by Stix (@stix) on CodePen.

Demo Image: CSS3 Transform Loader - Squareception
CSS3 Transform Loader - Squareception (demo image)

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
Demo Image: HTML And CSS Loader
HTML And CSS Loader (demo image)

HTML And CSS Loader

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

download demo and code

See the Pen Daily UI #20 | CSS loader by Håvard Brynjulfsen (@havardob) on CodePen.

Demo Image: Cube Flipping Loader
Cube Flipping Loader (demo image)

Cube Flipping Loader

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

download demo and code

See the Pen Cube Flipping Loader by Nikhil Krishnan (@nikhil8krishnan) on CodePen.

Demo Image: CSS Loading
CSS Loading (demo image)

CSS Loading

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

download demo and code

See the Pen CSS Loading by Ally Baird (@Ally__Baird) on CodePen.

Demo Image: Loading
Loading (demo image)

Loading

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

download demo and code

See the Pen Loading by Vladislav Trefil (@v_trefil) on CodePen.

Demo Image: The Division Website Loader
The Division Website Loader (demo image)

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

See the Pen The Division website loader by Jeremy Wynn (@jeremywynn) on CodePen.

Demo Image: Code Loader
Code Loader (demo image)

Code Loader

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

download demo and code

See the Pen Code Loader by Andrey Shchekin (@ashmind) on CodePen.

Demo Image: Loading Animation
Loading Animation (demo image)

Loading Animation

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

download demo and code

See the Pen Loading Animation by John Heiner (@johnheiner) on CodePen.

Demo Image: CSS Stairs Loader
CSS Stairs Loader (demo image)

CSS Stairs Loader

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

download demo and code

See the Pen CSS Stairs Loader by Irko Palenius (@ispal) on CodePen.

Demo Image: CSS3 Loading Spinner
CSS3 Loading Spinner (demo image)

CSS3 Loading Spinner

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

download demo and code

See the Pen CSS3 Loading Spinner by Iván Villamil (@ivillamil) on CodePen.

Demo Image: CSS Loaders
CSS Loaders (demo image)

CSS Loaders

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

download demo and code

See the Pen Loaders by Jordano Aragão (@jordanoaragao) on CodePen.

Demo Image: CSS3 Infinite Loader
CSS3 Infinite Loader (demo image)

CSS3 Infinite Loader

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

download demo and code

See the Pen CSS3 Infinite Loader by Jonathan Silva (@jonathansilva) on CodePen.

Demo Image: Bookshelf Loader
Bookshelf Loader (demo image)

Bookshelf Loader

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

download demo and code

See the Pen #Codevember - Day 6 - Bookshelf loader by Grélard Antoine (@ikoshowa) on CodePen.

Demo Image: Loading Animation CSS
Loading Animation CSS (demo image)

Loading Animation CSS

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

download demo and code

See the Pen Loading Animation CSS by Tatsuya Azegami (@42EG4M1) on CodePen.

Demo Image: Pure CSS Loader
Pure CSS Loader (demo image)

Pure CSS Loader

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

download demo and code

See the Pen Pure CSS Loader by Izzy Skye (@zephyr) on CodePen.

Demo Image: Glitchy Loading Indicator
Glitchy Loading Indicator (demo image)

Glitchy Loading Indicator

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

download demo and code

See the Pen Glitchy Loading Indicator by Jack Rugile (@jackrugile) on CodePen.

Demo Image: CSS3 Loader - Audio Effect
CSS3 Loader - Audio Effect (demo image)

CSS3 Loader - Audio Effect

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

download demo and code

See the Pen CSS3 Loader - Audio effect by Boris Graeff (@boris-graeff) on CodePen.

Demo Image: Neon Grid Loaders
Neon Grid Loaders (demo image)

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

See the Pen Neon Grid Loaders by Mai El-Awini (@maicodes) on CodePen.

Demo Image: Simple CSS Loader
Simple CSS Loader (demo image)

Simple CSS Loader

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

download demo and code

See the Pen Simple CSS Loader by Henry (@hedgehog1029) on CodePen.

Demo Image: Pure CSS3 3D Flipbook Loader
Pure CSS3 3D Flipbook Loader (demo image)

Pure CSS3 3D Flipbook Loader

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

download demo and code

See the Pen Pure CSS3 3D Flipbook Loader by Josh Hillier (@joshy) on CodePen.

Demo Image: Preloader Animation
Preloader Animation (demo image)

Preloader Animation

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

download demo and code

See the Pen Preloader animation by Devilish Alchemist (@devilishalchemist) on CodePen.

Demo Image: Cupcake - A Simple, Minimal Loader
Cupcake - A Simple, Minimal Loader (demo image)

Cupcake - A Simple, Minimal Loader

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

download demo and code

See the Pen Cupcake - A simple, minimal loader. by Prayush S (@prayushS) on CodePen.

Demo Image: Two Cube Loader
Two Cube Loader (demo image)

Two Cube Loader

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

download demo and code

See the Pen wByBmJ by Bennett Feely (@bennettfeely) on CodePen.

Demo Image: Square Loader
Square Loader (demo image)

Square Loader

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

download demo and code

See the Pen Square Loader by Tashfeen Ahmad (@tashfene) on CodePen.

Demo Image: Fire Loader
Fire Loader (demo image)

Fire Loader

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

download demo and code

See the Pen Fire Loader by Vitaly Silkin by White Wolf Wizard (@WhiteWolfWizard) on CodePen.

Demo Image: 8 Bit Spinner
8 Bit Spinner (demo image)

8 Bit Spinner

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

download demo and code

See the Pen 8 bit spinner by Fabrizio Bianchi (@fbrz) on CodePen.

Demo Image: Infinite Domino Loader
Infinite Domino Loader (demo image)

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

See the Pen Infinite domino loader by Michiel Bijl (@Michiel) on CodePen.

Demo Image: Pulse Loader
Pulse Loader (demo image)

Pulse Loader

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

download demo and code

See the Pen loader for DJ pulse by adam (@adsie96) on CodePen.

Demo Image: Hand Animation - Loading
Hand Animation - Loading (demo image)

Hand Animation - Loading

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

download demo and code

See the Pen Hand animation - loading by r4ms3s (@r4ms3s) on CodePen.

Demo Image: CSS Loader
CSS Loader (demo image)

CSS Loader

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

download demo and code

See the Pen CSS loader by Jeroen (@jeroens) on CodePen.

Demo Image: Level Loader Dribbble Port
Level Loader Dribbble Port (demo image)

Level Loader Dribbble Port

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

download demo and code

See the Pen Level Loader Dribbble Port by Alex (@akwright) on CodePen.

Demo Image: Flexbox Loader
Flexbox Loader (demo image)

Flexbox Loader

Simple flexbox loader.
Made by wontem
October 22, 2014

download demo and code

See the Pen Flexbox loader by wontem (@wontem) on CodePen.

Demo Image: Pong Loader
Pong Loader (demo image)

Pong Loader

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

download demo and code

See the Pen Single element pong loader by George Hastings (@georgehastings) on CodePen.

Demo Image: Equalizes The Loader
Equalizes The Loader (demo image)

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

See the Pen Equalizes the loader by Caohim (@caohim) on CodePen.

Demo Image: CSS3 Loader
CSS3 Loader (demo image)

CSS3 Loader

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

download demo and code

See the Pen Css3 Loader by Salmen Bejaoui (@Salmen) on CodePen.

Demo Image: VSCO Loader
VSCO Loader (demo image)

VSCO Loader

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

download demo and code

See the Pen VSCO loader by Andreas Gillström (@hynden) on CodePen.

Demo Image: CSS Preloader
CSS Preloader (demo image)

CSS Preloader

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

download demo and code

See the Pen Preloader CSS by Sébastien Olivier (@SebastienOlivier) on CodePen.

Demo Image: Loader CSS3
Loader CSS3 (demo image)

Loader CSS3

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

download demo and code

See the Pen Loader css3 by Mathieu Richard (@MathieuRichard) on CodePen.

Demo Image: CSS3 Loader Animation - Peeek
CSS3 Loader Animation - Peeek (demo image)

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

See the Pen CSS3 Loader Animation - Peeek by Rıza Selçuk Saydam (@rss) on CodePen.

Demo Image: CSS Animated Loader
CSS Animated Loader (demo image)

CSS Animated Loader

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

download demo and code

See the Pen CSS Animated Loader by Christofer Vilander (@c_vilander) on CodePen.