Sometimes when the user interacts with your application, behind the scenes you might need to send back some data from the server. It’s a good idea to have some sort of loading animation which ensures the user that you’re processing his input, and that you’re sending back a response back soon.
There are probably hundred of thousands of different loading animations available out there on the internet which you can copy and paste in your project, which is fine, but it wouldn’t be better if you’ll know exactly how they were implemented in order for you to customize it as you wish?
As you might notice from my previous posts, I’m a big fan of CSS3 animations… Because I am not a good designer, I developed a passion for recreating any design I could find on sites like dribbble and behance in plain HTML/CSS (and JS where necessary).
This will be an “on going” post, as I’m going to add multiple loaders in the future. You should keep an eye on the post :D. I prepared this Codepen where I’ll upload all the loading animations. (There is also some JavaScript for the sliding effect between slides, but that is not affecting the CSS code for the loading animations).
1. Spinner with top border
As you can see, it’s a simple circle that has a border top which is rotating clockwise.
HTML:
<div class="spinner1"></div>
CSS:
.spinner1 {
width: 50px;
height: 50px;
border-radius: 50%;
border-width: 3px;
border-style: solid;
border-color: #fff transparent transparent transparent;
animation: spinner1 1s linear infinite;
}
@keyframes spinner1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
First part is pretty obvious, we have a 50px/50px box, which is turned into a circle by applying a border-radius of 50%. Next, we split the border property into 3 separate properties (width, style and color) because we need to apply a different color to the borders. top, right, bottom and then left -> this is the order in which they are styled, and because 3 of them are transparent we can only see the top one.
Lastly, we have an animation which will last for 1 second and it will start over again when it’s complete because we set the animation-iteration-count property to be infinite. The keyframes rule specifies the animation code. For our example we start rotating from 0deg to 360deg… pretty straightforward.
2. Spinner with 2 borders
This one is pretty similar. The only difference is that we have the bottom border also visible.
HTML:
<div class="spinner2"></div>
CSS:
.spinner2 {
width: 50px;
height: 50px;
border-radius: 50%;
border-width: 3px;
border-style: solid;
border-color: #fff transparent #fff transparent;
animation: spinner2 1s linear infinite;
}
@keyframes spinner2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
Note: We could have used the same animation as before, but I’m keeping them separated to be more structured.
3. Scaling spinner with 2 borders
HTML:
<div class="spinner3"></div>
CSS:
.spinner3 {
width: 50px;
height: 50px;
border-radius: 50%;
border-width: 3px;
border-style: solid;
border-color: #fff transparent #fff transparent;
animation: spinner3 1s linear infinite;
}
@keyframes spinner3 {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(0.5);
}
100% {
transform: rotate(360deg) scale(1);
}
}
You can play with the size of the spinner by adding a scale function to the transform property (besides the rotate function). From 0% to 50% we scale the spinner down, and then we scale back to 1 at 100%.
4. Lazy spinner with 2 borders
HTML:
<div class="spinner4"></div>
CSS:
.spinner4 {
width: 50px;
height: 50px;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
border-radius: 50%;
animation: spinner4 1s linear infinite;
}
@keyframes spinner4 {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(150deg);
}
80% {
transform: rotate(210deg);
}
100% {
transform: rotate(360deg);
}
}
We can play around with the rotation speed by changing the degrees at different times. As you can see we change 150deg in rotation from 0% to 20% but then we only change 60deg from 20% to 80%. This will make it look like it slows down a little.
Enough with the spinning circle… Let’s create something else, shall we? :D
5. Jumping balls/globs
This one is also very popular among CSS loading animations. It is also very easy to set it up:
HTML:
<div class="b-container">
<span class="ball"></span>
<span class="ball"></span>
<span class="ball"></span>
</div>
Using a container to keep all the span tags in a place. You can then put it wherever you need it.
CSS:
.b-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 60px;
flex-direction: row;
}
.b-container .ball {
background-color: #fff;
border-radius: 50%;
display: block;
width: 15px;
height: 15px;
animation: jump 0.7s ease-in-out infinite;
}
.b-container .ball:nth-child(2) {
animation-delay: 0.15s;
}
.b-container .ball:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes jump {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
Step 1 - We style the container by making it a flexbox container (easier to align the items which are in it). I’ve added a fixed width of 60px to the container and a smaller total width for the balls (45px), this way we have 15px (60 - 45) which flexbox will use to add some spacing around the balls.
Note: You can drop flexbox and use inline-block elements for the balls with some margin between them. It should look the same.
Step 2 - We create a jumping animation by changing the translateY property, and we add a little animation-delay for the 2nd and 3rd ball using the :nth-child selector.
6. Growing bars
This one is pretty similar to the previous one, but instead of balls/globs we have rectangles/bars and instead of changing the translateY property, we’re going to change the scaleY property:
HTML:
<div class="bars-container">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
CSS:
.bars-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 40px;
flex-direction: row;
}
.bar {
background-color: #fff;
height: 50px;
width: 10px;
display: block;
animation: increase 1s ease-in-out infinite;
}
.bar:nth-child(2) {
animation-delay: 0.25s;
}
.bar:nth-child(3) {
animation-delay: 0.5s;
}
@keyframes increase {
0%,
100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.6);
}
}
That’s all for now! More loading animations are coming… Stay tuned! ^_^
Do you have any fancy loading animation you want to show? Send me an email with it and I might add it to this post!