Table of Contents

In this article we showcase some examples of progressbars, loading indicators and CSS spinners built purely with CSS

Book shelf loader

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

Simple HTML and CSS loader

See the Pen Loader by Alexandr Izumenko (@Izumenko) on CodePen.

HTML and CSS preloaders

See the Pen Preloaders by Dom (@ahdigital) on CodePen.

CSS Goo Loader

See the Pen Goo Loader by Elior Tabeka (@eliortabeka) on CodePen.

A beautiful preloader with rotating circles. Pure CSS

See the Pen Rotating Circles Preloader – SCSS by Animated Creativity (@animatedcreativity) on CodePen.

Rainbow loading with HTML, CSS and JS

See the Pen Illuminati-Rainbow Loading by foleyatwork (@foleyatwork) on CodePen.

An awesome flip preloader made in CSS

See the Pen Animated FlipPreloader – SCSS by Animated Creativity (@animatedcreativity) on CodePen.

Smooth play fill loader with HTML, CSS and JavaScript

See the Pen Play Fill Loader by Chris Gannon (@chrisgannon) on CodePen.

7.Lego Loader

See the Pen LEGO Loader by Chris Gannon (@chrisgannon) on CodePen.

Spinners & page loaders pure CSS

See the Pen Spinners & Page Loaders Pure CSS by Anya Melnyk (@slyka85) on CodePen.

Simple floating loading animation mas with CSS

See the Pen Floating Loading Animation by Mario Duarte (@MarioDesigns) on CodePen.

Pure CSS Cute loading animation

See the Pen Cute Loading by Shak Daniel (@shakdaniel) on CodePen.