One of the fundamental principles of User Experience (UX) is that a visitor expects to see some feedback when they do an actionable work on a website or an app. For example, when you click on a “Download” button to download a file to your machine, the file processes in the background but on the frontend, till the file is ready, we want to let the user know that some process is running in the background and they have to wait for a few seconds till the download begins.
But, if the website shows nothing, most of the users will conclude that something is wrong with your site. By this, they will navigate away before they realise your site has been processing their request!
You don’t want that to happen so to solve this issue in CSS, we have the concept of adding a ‘loading’ state. This animation lets the user know that their request has been received and that the site is loading some relevant information.
Now how to make one? If you have never coded a CSS loader, or just want to get some inspiration of some of the best ones, we have curated it all for you in this article.
CSS Loaders (CodePen)
The following CSS loaders are available as a CodePen demos:
1. Neumorphism Gradient Loader
This loader is a mix breed of both neumorphism and gradient design - the two highly trending things in the frontend world as of now.
What’s unique?
It heavily relies on box-shadows , pseudo-classes and the filter property to achieve this effect.
// Box shadow
box-shadow: -5px -5px 5px rgba(255, 255, 255, 0.1),
10px 10px 10px rgba(0, 0, 0, 0.4),
inset -5px -5px 5px rgba(255, 255, 255, 0.2),
inset 10px 10px 10px rgba(0, 0, 0, 0.4);
// Pseudo class
.loader:before {
content: "";
.
.
.
}
// Filter property
filter: blur(20px);
2. Loading Animation w/ Translate and Z-index
These blue shaped circles showcase the best of depth effect between themselves thanks to the different z-index values they have. They also animate on top of each-other for a more natural transition.
What’s unique?
Not only z-index, but also it has some cool blue linear-gradient and transform properties on the x-axis.
View Website
View Website
View Website
// Linear gradient
background: linear-gradient(45deg,
rgba(2,0,36,1) 0%,
rgba(9,9,121,1) 35%,
rgba(0,212,255,1) 100%);
// Z-index and transforms
@keyframes move-1 {
0% {z-index: 3; transform: translateX(0);}
.
.
.
100% {z-index: 1; transform: translateX(0);}
}
3. Pure CSS loader #30: 1 element metaballs animation
Well, here is a meatball sticking to various other balls (circles) in a smooth animation.
Take a look at how it attaches to two and one of the balls on different axes. This is something appreciable!
What’s unique?
First of all, the code is in SASS (.scss) and therefore you can expect some really cool use-cases of the same with custom variables, @for flow control, and CSS blend mode.
// Custom variables
$n: 10;
$r: 1.5em;
$oa: -90deg;
$ba: 360deg/$n;
$hl: 2*$r;
.
.
.
// Flow control
@for $i from 0 to $n {
$ca: $oa + $i*$ba;
$sh: $sh,
$rc*cos($ca) $rc*sin($ca) currentcolor
}
// Blend mode
.loader {
.
.
.
mix-blend-mode: multiply;
.
.
.
}
4. Pure CSS loader #31 - 1 element swappy
Here’s a cool swappy animation where you have a box container inside which we have a circle which morphs or ‘swaps’ away the its shape after a set interval of time. It goes from a circle to a square to again a circle.
What’s unique?
-
The
animationvalues change be changed dynamically as per your liking as it uses SASS variables. -
The use of
@forinside the animation@keyframescode. -
Use of
clip-pathto morph the shape.
// Dynamic animation body { . . . animation: fsx 4*$t steps(1) infinite }
// Use of @for inside @keyframes
@keyframes fbg {
@for $i from 0 to $n {
#{$i/$n*100%} { background: nth($c, $i +
1) }
}
}
// Use of clip-path
@keyframes exp {
0%, #{$q} { clip-path: inset(0 .5*$d $d round
50%) }
100% { clip-path: inset(0 round 50%/ 0) }
}
5. Spiral Loading
Need something infinite? This loading animation goes on an on with a soothing spiral shape. The good part is that the towards the end it fades away and towards its origin it stays solid white. It gives an immersive and soothing loading experience.
What’s unique?
You can change the amount of circles you want to have in the spiral, the diameter, radius and the duration. It makes a ring of circles by using the transform: rotate() function.
// Control the amount of circles, diameter, radius and duration
.circle {
$circle-count: 60;
$circle-diameter: 0.5em;
$ring-radius: 4em;
$duration: 3s;
.
.
.
}
// Using rotate() to make a ring of circles
transform: rotate($ratio * 720deg) translateX($ring-radius);
6. Liquid Loader
Imagine a loader which is like a two-way open pipe. On one end, it takes in some liquid and from the other one it spits out the same liquid. Sound weird?
Then add an ultra cool gradient to it and make it realistic with amazing shadow play. This is the liquid loader you don't want to miss to take a look!
What’s unique?
It uses CSS filter property and many of the CSS-SVG values like stop-color, stroke-dasharray and more!
// CSS filter
.skugga {
filter: blur(5px);
.
.
.
}
// CSS-SVG values
.strecken {
stroke-dasharray: 26 54;
fill: none;
stroke: url(#gradient);
stroke-width: 23;
stroke-linecap: round;
}
7. Gradient Spinner
This looks like the perfect match for your upcoming meditation or breathing app. Or maybe it can also be used on a smart home appliance website where you want to mimic the dial functionality via a loading animation.
What makes it great is the choice of animation speed and the gradient color. It’s not too much and it fits so well!
What’s unique?
-
Use of
linear-gradientvalues. -
It uses the
blurfilter. -
Pseudo classes like
:nth-child()and:afterare used..loader { . . . background: linear-gradient(#f07e6e, #84cdfa, #5ad1cd); animation: animate 1.2s linear infinite; }
8. Hexagon Loading With CSS (2)
It’s nothing but one of the simplest animation you can offer in your website. A thin-line hexagon forms itself and completes its shape in a loop.
What’s unique?
It achieves this effect by using the transform: rotate() function and with extra cautious values of @keyframes.
// Use of rotate
div:nth-of-type(2){transform:rotate(60deg)}
div:nth-of-type(3){transform:rotate(-60deg)}
// Use of precise values in @keyframes
@keyframes load1 {
0%{bottom:0;height:0}
6.944444444%{bottom:0;height:100%}
50%{top:0;height:100%}
59.944444433%{top:0;height:0}
/* 91.6666667%{top:0;height:0%;} */
}
9. Terminal Spinner
In love with your terminal where you run various commands? Well then why not make a CSS loader out of it!
This one is monochrome (just as all terminal things should be), it flashes and blinks in a conform cycle and it does it all well!
What’s unique?
The clever use of pseudo-classes combined with an animation block which in itself uses the content property.
// Pseudo class
.spinner:after {
animation: changeContent .8s linear infinite;
display: block;
content: "⠋";
font-size: 80px;
}
// The animation block
@keyframes changeContent {
10% { content: "⠙"; }
20% { content: "⠹"; }
30% { content: "⠸"; }
40% { content: "⠼"; }
50% { content: "⠴"; }
60% { content: "⠦"; }
70% { content: "⠧"; }
80% { content: "⠇"; }
90% { content: "⠏"; }
}
10. Weird Loader
Talk about loaders being drunk! This is a set of two circles which feels like they are competing with each other in the Weirdest of All Competition!
If your website is funky and quite animated, then this one will suit you the best.
What’s unique?
It has some of the best animation stops used which gives it the weird animation feel
// Use of animation stops
@keyframes circle--1 {
0% {
top: 50%;
}
50% {
top: 120%;
}
100% {
top: 50%;
}
}
@keyframes circle--2 {
0% {
top: 50%;
}
50% {
top: -50%;
}
100% {
top: 50%;
}
}
Misc CSS Loader Libraries and Resources
This mixed bag of tools contain some of the best loader libraries and other miscellaneous resources.
1. CSS Load.net
The first of the lot is a loader generator with a preset of tons of editable spinning animations right from the browser!
All you need to do is select an animation preset, change its color, size and speed and then hit that ‘Get the code’ button. It will give you both the HTML and CSS needed in order to bake that animation right in your project.
2. Epic Spinners
Developed by Epicmax and designed by Vasili Savitski, Epic Spinners is a great collection of CSS-only spinners ranging from a ‘flower spinner’ to a ‘trinity rings spinner’.
The examples shown here are as epic as their name. Once you select a spinner or your choice, it will show you the HTML + CSS code. Not only that, to also has VueJS support. So you can also simply copy the Vue code too!
3. LOADING.io
This is one is a collection of CSS loading animations dedicated for speed, simplicity and is dev-friendly.
The beautiful part is that the size of each icon is less than 1KB even before it’s minimised! To use, just click the loader you want, get the CSS code, copy it to your CSS file and then finally copy the HTML wherever you want to implement that loader.
4. Spinkit
If you are someone who like the route of simple things then Spinkit offers just that. It uses the bare minimum requirements needed in order to achieve the spin or the loading effect.
With the transform and opacity properties, it’s amazing to see how many different loading spinner can be made! You can also check out its GitHub repo.
5. 30 CSS Page Preload Animations
As the name suggests, this provides you a total of 30 loading animations ranging from some square and round animations to the other 10+ miscellaneous loaders at your disposal.
These animations are best suited for content that takes some time to load like an image gallery. You can easily customise them as it’s made with vanilla CSS.
We hope you liked these cool and unique CSS loading animation resources. You can use your favourite ones as all of them have a great documentation and comes with plenty of examples and use cases.
Comments (0)