CSS Wandering Cubes Loading Animation

One of the main advantages of using CSS methods over GIF images is that they don’t take so much time to load. They are much quicker and are available whenever we want them. In this tutorial, I am going to show you how to create wonderful Wandering Cubes loading animation using CSS and HTML. It uses the animation, transforms capabilities of CSS and it’s supporting to all the browsers.


<!doctype html>
<meta charset="UTF-8">
 margin: 300px auto;
 width: 40px;
 height: 40px;
.square_1, .square_2{
 background-color: #FFF;
 width: 15px;
 height: 15px;
 top: 0;
 left: 0;
 -webkit-animation: sa-cubemove 1.8s infinite ease-in-out;
 animation: sa-cubemove 1.8s infinite ease-in-out;
 -webkit-animation-delay: -0.9s;
 animation-delay: -0.9s;
@keyframes sa-cubemove{
 transform: translateX(42px) rotate(-90deg) scale(0.5);
 -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
 transform: translateX(42px) translateY(42px) rotate(-179deg);
 -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
 transform: translateX(42px) translateY(42px) rotate(-180deg);
 -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
 transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
 -webkit-transform:translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
 transform: rotate(-360deg);
 -webkit-transform: rotate(-360deg);
@-webkit-keyframes sa-cubemove{
 25%{ -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);}
 50%{ -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);}
 75%{ -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5); }
 100%{ -webkit-transform: rotate(-360deg);}
<div class="loading">
 <div class="square_1"></div>
 <div class="square_2"></div>

Was this article helpful?

Yes No

How can we improve it?


We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest
Share via:


Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply