CSS Tutorial: How to create a loading animation: #2 Snakeloader

snackaholic(57)

Published in

#programming

Words

502

Reading

3 min

Listen

Play

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

In the last part, which was created 5 months ago, I showed you how to create a "loading circuit".

Today I would like to show you how to realize the famous "Snakeloader".

To make sure that everyone gets an idea of this animation, here is a GIF to illustrate it:

Solution approach

In order to be able to recreate the animation shown, I thought about the following. Take two boxes of the same size and place them on top of each other. Then you make circles out of them & give both an equal-sized border. Now you animate one of the boxes to rotate around its own axis. DONE!

But what does this look like in practice? Let's find out!

The HTML

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

<div id="track"></div>
<div id="snake"></div>

Since we want to rebuild the "Snackeloader", I have choosen the Id "track" for one of the elements and the other element, which should represent the snake, got the Id "snake".

The CSS

Necessary instructions for the CSS file have already been described above.

Take two boxes of the same size and place them on top of each other. Then you make circles out of them & give both an equal-sized border

#track, #snake {
  width: 100px;
  height: 100px;
  border radius: 50%;
  position:absolute;
  top:0;
  left:0;
}

Equal-sized boxes can be achieved by referencing both ids track and snake. They both will have a width and height of 100px. Placing them above each other is achieved by absolute positioning. Our elements become circles thanks to the border-radius instruction.

give both an equal-sized border. Now you animate one of the boxes to rotate around its own axis.

Ok we will first add the border

#track, #snake {
  border: 10px solid #e3e3e3;
}

Now lets bring our snake to life!

#snake {
  animation: rotate infinite 1s linear;
}

@keyframes rotate {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

The CSS information within the @keyframes rule instructs the browser to switch from the current value to the target value step by step. The duration of the animation and the information whether it should be repeated is maintained by the element to be animated itself. In this case, we want the animation to last a second & repeat endlessly. It should also be linear. Let's take a look at what we got so far:

We have our 2 circles and it looks like they lie on top of each other. The inspector tells us what to do: we still have to change the color of our track. The snake must also be placed above the track.

#track {
  border-color: rgb(100,100,100);
}

#snake {
  animation: rotate infinite 1s linear;
  border-right-color: transparent;
  z-index: 10;
}

The z-index specification instructs the browser to place the snake "closer" to the viewer. We also want the snake to take up only 3/4 of the available space. To do this, we instruct the browser to draw the right border transparent. The final outcome: