Making a CSS loader, preloader or spinner has become more and more popular in the last few years thanks to the rise of JavaScript frameworks like Vue, Angular and React. They are mostly used when the website or application needs to load for the first time, or if it’s performing a long process. Loading animations are important because they communicate to the user that something is happening, making sure the visitor doesn’t navigate away from the page.
When I have to add a loader, buttons or text effects to a website or application, I like to look around for some inspiration first. CodePen is a great place to find examples that are easy to replicate. Bellow, you will find a list of CSS loaders and loading spinners I found interesting or useful. Enjoy!
LoadLab | Pure CSS Loaders
Pure CSS loaders… Currently a work in progress
See the Pen LoadLab | Pure CSS Loaders by camdenfoucht (@camdenfoucht) on CodePen.
CSS Loaders
Delightful and performance-focused pure css loading animations.
See the Pen CSS Loaders by mjcabangon (@mjcabangon) on CodePen.
Single-Element CSS Loaders
Trying to squeeze the most out of a single div.
See the Pen Single-Element CSS Loaders by jkobilka (@jkobilka) on CodePen.
CSS Loader
A warp in CSS loader with rainbow bubbles.
See the Pen CSS Loader by Mamboleoo (@Mamboleoo) on CodePen.
Gooey CSS Loader
Recreated this loader usin the technique in :css-tricks.com/gooey-effect/
See the Pen Gooey CSS Loader by megatroncoder (@megatroncoder) on CodePen.
Animated CSS loader
An animated CSS loader that depicts four colorful rounded squares converging in the center one after another.
See the Pen Animated CSS loader by tommiehansen (@tommiehansen) on CodePen.
Pure CSS Loader
Multiple pure CSS loaders that you can use in your web and mobile projects.
See the Pen Pure CSS Loader by haitham (@haitham) on CodePen.
Spinners & Page Loaders Pure CSS
Multiple stylish spinners and page loaders using pure CSS.
See the Pen Spinners & Page Loaders Pure CSS by slyka85 (@slyka85) on CodePen.
CSS Loaders With Stylus
Six flat CSS loaders with stylus.
See the Pen CSS Loaders With Stylus by SynCap (@SynCap) on CodePen.
Rainbow CSS Loaders
A bunch of simple page loaders made with pure CSS.
See the Pen Rainbow CSS Loaders by munya98 (@munya98) on CodePen.
CSS Loaders
A neat CSS loader inspired by Slack app.
See the Pen CSS Loaders by object505 (@object505) on CodePen.
Floating Loading Animation
Simple floating loading animation mas with CSS in a flat design feel.
See the Pen Floating Loading Animation by MarioDesigns (@MarioDesigns) on CodePen.
Goo Loader
A 3D rotating goo loader made with CSS.
See the Pen Goo Loader by eliortabeka (@eliortabeka) on CodePen.
Spin One Div
A collection of single element css loaders and spinners http://spinonediv.ru/.
See the Pen Spin One Div by pavelivanov (@pavelivanov) on CodePen.
Play Fill Loader
I'm working on a play/loading/pause icon for a client and this sort of appeared. It's not suitable for this client but it helps get my head into the job.
See the Pen Play Fill Loader by chrisgannon (@chrisgannon) on CodePen.
CSS3 Animation Spinners & Preloaders
CSS3 animations spinners and preloaders, no JS, no images.
See the Pen CSS3 Animation Spinners & Preloaders by fox_hover (@fox_hover) on CodePen.
CSS Loader
A neat bouncey wave loader using just CSS.
See the Pen CSS Loader by GudpaDevs (@GudpaDevs) on CodePen.
HTML Loader
Cool CSS loader consisting of two triangle rotating and combining into a square.
See the Pen HTML Loader by justintan (@justintan) on CodePen.
Illuminati-Rainbow CSS Loading
Illuminati triangle rainbow loader.
See the Pen Illuminati-Rainbow CSS Loading by foleyatwork (@foleyatwork) on CodePen.
wineshop loader
Another idea for a wine shop loader consisting of two cups.
See the Pen wineshop loader by nazarelen (@nazarelen) on CodePen.
Abstract Activity Indicator
An abstract activity indicator loader perfect for health projects.
See the Pen Abstract Activity Indicator by andreasstorm (@andreasstorm) on CodePen.
Redirecting Loader
Animated loader when redirecting a user to another page
See the Pen Redirecting Loader by mr_alien (@mr_alien) on CodePen.
LEGO Loader
Everybody loves LEGO and nobody likes waiting.
See the Pen LEGO Loader by chrisgannon (@chrisgannon) on CodePen.
Jelly Box Loader #6
A rotating jelly box loader made with CSS.
See the Pen Jelly Box Loader #6 by fbrz (@fbrz) on CodePen.
![One
<div> Loading… [Ongoing Process]”>
<p data-height=](https://cdn.freebiesupply.com/blog/12-07-2018/1div-loading-o5.png)
One
HTMl & CSS Loader
Rotating squares in a circle CSS loader.
See the Pen HTMl & CSS Loader by Izumenko (@Izumenko) on CodePen.
Loader #4 – Spring
A lovely spring-like CSS loader.
See the Pen Loader #4 – Spring by fbrz (@fbrz) on CodePen.
Making Pancake’ Loader
Yet another silly loader.
See the Pen Making Pancake’ Loader by pawelqcm (@pawelqcm) on CodePen.
Hand Animation Loader
I really liked that little hand animation so I decided to recreate it in good pure CSS only. No JS was harmed.
See the Pen Hand Animation Loader by r4ms3s (@r4ms3s) on CodePen.
Loading Animation
A rainbow equalizer-like CSS loader.
See the Pen Loading Animation by johnheiner (@johnheiner) on CodePen.
Fire Loader by Vitaly Silkin
Pixelate fire loader using only CSS.
See the Pen Fire Loader by Vitaly Silkin by WhiteWolfWizard (@WhiteWolfWizard) on CodePen.
Neon Grid Loaders
Four variations of a loading indicator using the same flexbox grid system.
See the Pen Neon Grid Loaders by maicodes (@maicodes) on CodePen.
Bookshelf Loader – #Codevember – Day 6
A nice moving bookshelf animation done only with css animations.
See the Pen Bookshelf Loader – #Codevember – Day 6 by ikoshowa (@ikoshowa) on CodePen.
VSCO Loader
A part of http://grid.vsco.co/ but now moving.
See the Pen VSCO Loader by hynden (@hynden) on CodePen.
Loading
A visual numbering CSS loading coded with Javascript.
Glitchy Loading Indicator
A Matrix-like loader concept built with CSS and JS.
See the Pen Glitchy Loading Indicator by jackrugile (@jackrugile) on CodePen.
Loader For DJ Pulse
A DJ pulse loader made with one DIV and pure CSS.
See the Pen Loader For DJ Pulse by adsie96 (@adsie96) on CodePen.
Pure CSS3 3D Flipbook Loader
Been experimenting with CSS 3D transforms.
See the Pen Pure CSS3 3D Flipbook Loader by joshy (@joshy) on CodePen.
Zippo — SVG + CSS Loader/Spinner Configurator
A configurator for an SVG loading spinner that uses native css variables (custom properties).
See the Pen Zippo — SVG + CSS Loader/Spinner Configurator by jasesmith (@jasesmith) on CodePen.
See the Pen HTMl & CSS Loader by Izumenko (@Izumenko) on CodePen.
See the Pen Loader #4 – Spring by fbrz (@fbrz) on CodePen.
See the Pen Making Pancake’ Loader by pawelqcm (@pawelqcm) on CodePen.
See the Pen Hand Animation Loader by r4ms3s (@r4ms3s) on CodePen.
See the Pen Loading Animation by johnheiner (@johnheiner) on CodePen.
See the Pen Fire Loader by Vitaly Silkin by WhiteWolfWizard (@WhiteWolfWizard) on CodePen.
See the Pen Neon Grid Loaders by maicodes (@maicodes) on CodePen.
See the Pen Bookshelf Loader – #Codevember – Day 6 by ikoshowa (@ikoshowa) on CodePen.
See the Pen VSCO Loader by hynden (@hynden) on CodePen.
See the Pen Glitchy Loading Indicator by jackrugile (@jackrugile) on CodePen.
See the Pen Loader For DJ Pulse by adsie96 (@adsie96) on CodePen.
See the Pen Pure CSS3 3D Flipbook Loader by joshy (@joshy) on CodePen.
See the Pen Zippo — SVG + CSS Loader/Spinner Configurator by jasesmith (@jasesmith) on CodePen.
