Welcome to the third part of my CSS tutorial, in which I will show you how to create a loading animation with some HTML & CSS.

In the last part, I showed you how to create a "snakeloader".

Today I would like to show you how you can make a "snakerace" loading animation with a few adjustments to the "Snakeloader". To make sure that everyone gets an idea of the animation we are going to create, here is a PNG to illustrate it:

How to do it

First I will remove the previously used track element & use it to place a word. In this case "Loading". The snake will be shortened to a third of its current length & also will receive 2 little siblings, which are animated at different speed. DONE!

The HTML

There is not much to say about the used HTML. We need 2 elements, which can be styled as we like..

<div id="snake"></div>
<div id="font">Loading</div>

We will place the other two snakes as CSS pseudo elements :before & :after.

The CSS

First, we want to place our pseudo elements. Then we need to apply the same css rules to both of them as we applied to the snake element. After that we give them different colors & animation runtimes. In addition, we will place them closer to the center with absolute positioning.

#snake:before, 
#snake:after {
  content:"";
  position: absolute;
  border radius: 50%;
  border: 4px solid transparent;
  animation: rotate infinite 2s linear;
}
#snake:before {
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-top-color: #1en9b6;
}
#snake:after {
  top: 24px;
  left: 24px;
  right: 24px;
  bottom: 24px;
  border-width: 3px;
  border-top-color: #004d40;
  animation duration:1s;
}

In the last step we put the lettering in the middle:

#font {
  position:absolute;
  top:75px;
  left:50px;
  color:#fff;
  width: 150px;
  height: 150px;
  line-height:100px;
  text-align:center;
}

Now we can take a look at our work:

For the nerds among you here as always a Fiddlelink.

---

Thanks for reading, if you have any questions, please leave them bellow in the commentsection. I will replay asap

Have a nice weekend!