150+ CSS Loaders - Free Code + Demos

A loading animation where the text “Loading…” is written around the edge of two spinning CSS 3D rings

A loading animation where the text “Loading…” is written around the edge of two spinning CSS 3D rings

Water Wave-loader Animation 2019

The code is a mess, no doubt, but it's about the outer values ;) The idea is originally from Gal Shir, a reeeally talented guy! https://dribbble.com/shots/4026985-If-only-I-could

Just a fun Project which is a loading bar which is resetting it self to default shortly before the loading progress is completed.

Dedicated to the memory of someone special who passed away this January. I only coded this, I did NOT come up with the design idea - lifted that from here.

Infinite loader UX exploration. Made with pure CSS.

Responsive pure CSS simple loader for #CodePenChallenge Color Pop. Loader is resizable with just 1 CSS edit. Enjoy!

Did 2 versions, because only Chrome supports offset-path, feGaussianBlur for now ...

A different take on the loading icon. HTML and CSS.

Made with css only have a look

Animated Loader by using only CSS.

My take on the simple loader for Colt Steele's advanced developer bootcamp

In an effort to actually learn some more about animation, my first attempt at making a loader with just CSS animations. Some added accessibility, though I am not sure how it would fair inside a real project. I need to do some testing.

A beautiful Preloader with rotating circles. Pure CSS.

Swing masking loader from an experiment lab ;)

The feeling you get when you're waiting in line at Chipotle. Burritos are magical. I'm working on some branding pieces for the next release of https://burrito.work

Goo Loader

A beautiful Preloader with rotating circles. Pure CSS.

An awesome Flip Preloader made in CSS. Colors are fully logical on flip. Any colors can be set easily.

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.

Everybody loves LEGO and nobody likes waiting.  I've lost track of the number of vehicles and buildings I've made with my son since he had his tonsils out. I just had to dip back into the digital realm for a few hours!

Simple floating loading animation mas with CSS in a flat design feel.

CSS3 animations spinners and preloaders, no JS, no images

CSS3 animations spinners

A loading animation to discover the foundamentals of flexbox axes and positioning.

Decided to give Animate.js a go and had a lot of fun with it. Shoutout to @tamashi and his pen for inspiration.

Enjoy it!

Enjoy it!

Loading spinner animation utilizing blend modes and linear gradients

Yet another silly loader ;)

Simple CSS animation. Could be used as a loader.

A simple "1 div" Element loader collection

Another idea for the loader

Animated loader when redirecting a user to another page

Another idea for the loader

Fully customizable and simple CSS-only loader.

Man I love CSS3 transorms... Anyway. 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 bec...

Read More

CSS Simple Cube Flip Loading Animation

A simple "1 div" Element loader collection

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.

CSS only stairs loader.

Colorful pure css loader with only two elements. This a simplified sample that I made inspired from this one: http://codepen.io/wifeo/pen/FBpJq

Pure css

Infinite Loader made with css3 and html.

A nice moving bookshelf animation done only with css animations. From Dribbble : https://dribbble.com/shots/2332418-Book-shelf-Loader-Icon

Text blur Animation CSS(SCSS) Only.

4 variations of a loading indicator using the same flexbox grid system.

Pure CSS, simple, performance-oriented loader.

Been experimenting with CSS 3D transforms

A HTML/CSS copy of one of the preloaders from this Codrops article: http://tympanus.net/codrops/2014/04/25/freebie-flat-style-squared-preloaders/

Best viewed in full screen.

A minimal loader with rotating square

Pixelated circular loader with box-shadow.

I really liked that little hand animation so I decided to recreate it in good pure CSS only. No JS was harmed.

Pure CSS, simple, performance-oriented loader.

Coded version of the shot by Alex Collins. Shot - http://drbl.in/mPeZ Author - https://dribbble.com/acolli Haml, Sass, Animations, Looped Animation Delays, Dribbble Port

Use of animation based on border-width only + the useful Sass loop to delay all our components. Equalizer style!

This is the loader animation that designed by Mikael Edwards and developed by Rıza Selçuk Saydam for Peeek.

Just another CSS loader.

Simple pulse loader example made in pure HTML and CSS using keyframes

Desafio 30 dias CSS - dia 16

preloader animation for page

A preload animation where a circle containing squares pops out of the surface, and then one square pops in and out around the circle while the others slide into each place the first square was.

A Metro style preloader in pure CSS.

Loading css and js animations