Article will be helpful for designers and non-coders. 1) Polite loader Demo Image: Polite loader
Loader that signs user that something is loading but the user feels “Im still free”
A simple loader using cubic-bezier animation
Author: Robin Selmer Created: June 23, 2015 Made with: HTML, CSS 3) Chrome Cast Loader Demo Image: Chrome Cast Loader
Google Crome Cast Loader
Author: Robin Brons Created: October 18, 2013 Made with: HTML, CSS 4) Dotted loading design with animation usign css and html Demo Image: Dotted loading design with animation usign css and html
Dotted loading image design usign css and html
Author: Rıza Selçuk Saydam Created: October 27, 2013 Made with: HTML, CSS 5) window icon like loader Demo Image: window icon like loader
window icon like loader
Author: Alexandr Izumenko Created: August 29, 2017 Made with: HTML, CSS 6) Hourglass loader Demo Image: Hourglass loader
Pure SVG infinite loader
Author: Lenka Created: March 27, 2015 Made with: HTML, CSS 7) Cocktail Loader Demo Image: Cocktail Loader
Cocktail loader using CSS and minimal jQuery.
Author: Marc Malignan Created: June 28, 2014 Made with: HTML, CSS 8) CSS Spinning Loaders Demo Image: CSS Spinning Loaders
Author: Elior Tabeka Created: July 16, 2017 Made with: HTML, CSS 10) Another pure CSS loader Demo Image: Another pure CSS loader
Another pure CSS loader
Author: Vadzim Tsupryk Created: February 26, 2015 Made with: HTML, CSS 11) Percentage Loader concept Demo Image: Percentage Loader concept
quick concept of a loader
Author: Robin Delaporte Created: March 06, 2018 Made with: HTML, CSS 12) Newtons Cradle Loader Demo Image: Newtons Cradle Loader
An animated loader of Newton’s cradle.
Author: Matt Smith Created: November 27, 2014 Made with: HTML, CSS 13) Infinite Loader made with css3 and html Demo Image: Infinite Loader made with css3 and html
Infinite Loader made with css3 and html.
Author: Jonathan Silva Created: July 09, 2014 Made with: HTML, CSS 14) 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
Author: Zoë Created: March 03, 2015 Made with: HTML, CSS 15) CSS loader based on a gif Demo Image: CSS loader based on a gif
A css loader based on a gif
Author: Glen Cheney Created: March 08, 2013 Made with: HTML, CSS 16) Loader CSS Animation loop Demo Image: Loader CSS Animation loop
Loader make with css animation loop
Author: Mattia Bericchia Created: December 12, 2014 Made with: HTML, CSS 17) 4 Pure CSS Loaders Demo Image: 4 Pure CSS Loaders
4 Pure CSS Loaders
Author: Peter Butcher Created: January 18, 2016 Made with: HTML, CSS 18) Tappy finger loader Demo Image: Tappy finger loader
The most impatient loader ever
Author: Steve Gardner Created: June 07, 2018 Made with: HTML, CSS 19) Circular loader using single element Demo Image: Circular loader using single element
Fun with CSS3 Keyframes
Author: Siddharth Parmar Created: November 25, 2014 Made with: HTML, CSS 21) Single element loaders Demo Image: Single element loaders
Using only one div and sass to create single element loaders
Author: Arthur Camara Created: September 19, 2015 Made with: HTML, CSS 22) Nice little loader with some icons Demo Image: Nice little loader with some icons
A nice little loader with some icons.
Author: Alex Rutherford Created: December 19, 2014 Made with: HTML, CSS 23) CSS Stairs Loader Demo Image: CSS Stairs Loader
CSS only stairs loader
Making pancake’ loader
Author: Pawel Created: December 09, 2016 Made with: HTML, CSS 25) Multi CSS Loaders Demo Image: Multi CSS Loaders
Multi CSS Loaders
COLLECTION OF LOADERS USING CSS 2D AND 3D TRANSFORMS
A minimal loader with rotating square
Author: Tashfeen Ahmad Created: January 01, 1970 Made with: HTML, CSS 28) Light Loader Demo Image: Light Loader
A canvas loader that sparks light from red to green
CSS only loaders
Author: Alberto Jerez Created: March 06, 2015 Made with: HTML, CSS 30) Less CSS3 Loaders Demo Image: Less CSS3 Loaders
Less CSS3 Loaders
Author: Jesús Gracia Created: October 07, 2014 Made with: HTML, CSS 31) Loader css3 with compass Demo Image: Loader css3 with compass
loader css3 with compass
Author: Vallée Antoine Created: December 18, 2013 Made with: HTML, CSS 32) Evil Loader Demo Image: Evil Loader
Author: Yehuda malka Created: July 02, 2013 Made with: HTML, CSS 33) Bracket Loader Animation Demo Image: Bracket Loader Animation
Bracket Loader Animation. Angle bracket spinning with ball translation animation.
Author: Mark Miscavage Created: February 01, 2019 Made with: HTML, CSS 34) Simple shape CSS loaders Demo Image: Simple shape CSS loaders
Some simple CSS loaders
Author: Aaron Iker Created: JANUARY 21, 2019 Made with: HTML, CSS 35) Simple loader with only one div Demo Image: Simple loader with only one div
Just CSS loaders
Author: Victor Darras Created: APRIL 25, 2014 Made with: HTML, CSS 36) Authentic Weather Loader Demo Image: Authentic Weather Loader
Authentic Loading animation for Weather
Author: Tim Holman Created: AUGUST 12, 2013 Made with: HTML, CSS 37) Little Ferry Loader Demo Image: Little Ferry Loader
A minimalistic loader, inspired by the ferry.
Author: Anders Schmidt Hansen Created: APRIL 04, 2015 Made with: HTML, CSS 38) SVG Gooey Loaders Demo Image: Gooey Loaders
SVG filters to some practical use – two experimental gooey loaders.
Author: Katrine-Marie Burmeister Created: MAY 11, 2015 Made with: HTML, CSS 39) Hypnotic CSS Loader Demo Image: Hypnotic CSS Loader
Weird hypnotic loader
Author: Max Created: SEPTEMBER 08, 2013 Made with: HTML, CSS 40) Overwatch Loader only by css3 Demo Image: Overwatch Loader only by css3
a loader when into the game in overwatch and only using css.
Author: CCG Created: AUGUST 10, 2016 Made with: HTML, CSS 41) Colored loader ring Demo Image: Colored loader ring
Create a simple and elegant loader effect with a colored ring
Author: Christiaan Laarman Created: MAY 15, 2015 Made with: HTML, CSS 42) Skype loader CSS Demo Image: Skype loader CSS
The login-loader for Skype with CSS only.
Author: Robert Bue Created: NOVEMBER 20, 2013 Made with: HTML, CSS 43) CSS Only SVG Infinity Loader Demo Image: CSS Only SVG Infinity Loader
Converted gsap properties into css keyframes. SVG markup copypasted as is. Original gsap version have better transition effect on end of animation. Not supported in ie.
Author: Nikolay Talanov Created: MARCH 26, 2015 Made with: HTML, CSS 44) Toggle Infinite Loader Demo Image: Toggle Infinite Loader
Infinity symbol SVG path animation loader.
Author: Ryan Mulligan Created: NOVEMBER 02, 2018 Made with: HTML, CSS 45) Lego Loader: Primary Colors Demo Image: Lego Loader: Primary Colors
Lego Loader: Primary Colors
Author: William A. | Keyon Created: JANUARY 18, 2019 Made with: HTML, CSS 46) Drifting car loader Demo Image: Drifting car loader
A loading screen of a drifting car.
Author: Nikita Hlopov Created: JANUARY 17, 2019 Made with: HTML, CSS 47) Preloaders – Pure css Demo Image: Preloaders – Pure css
3 different Preloaders – Pure css
Author: Ivan Grozdic Created: JANUARY 15, 2019 Made with: HTML, CSS 48) Cube loader using CSS Demo Image: Cube loader using CSS
Cube loader using CSS
Author: leusrox Created: JANUARY 13, 2019 Made with: HTML, CSS 49) Drama Loader Demo Image: Drama Loader
Fairly new to greensock and animation in general, just a little pen to test out the basics of making a loading animation.
Infinite loader UX exploration. Made with pure CSS.
Author: Oleg Frolov Created: JANUARY 14, 2019 Made with: HTML, CSS 51) Image Preloader Progress Bar Demo Image: Image Preloader Progress Bar
Progress bar with changeable skins showing page load percentage
Shuffle Queue dotted Loader
Firefox won’t animate background-position here and that breaks the demo.
Author: Ana Tudor Created: JANUARY 11, 2019 Made with: HTML, CSS 55) Only (S)CSS loading animation Demo Image: Only (S)CSS loading animation
The code is a mess, no doubt, but it’s about the outer values.
Author: Tobias Glaus Created: DECEMBER 20, 2018 Made with: HTML, CSS 56) Newton Loader Demo Image: Newton Loader
Newton loading style using css
Author: Andreas Storm Created: OCTOBER 04, 2018 Made with: HTML, CSS