CSS Double Bounce Loading Animation

In this tutorial, you’ll learn how to make some creative CSS Double Bounce loading animation. We all know that CSS makes a lot of features that allows you to do creative things. One of the features that we’re going to see today is creating loading animation with CSS and show the variety of animation. Now with CSS, we can do this without the need of any Javascript.

loading_model_6.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading_model_6</title>
<style>
body{
 background-color:#652a98;
}
.loading{
 width:60px;
 height:60px;
 position:relative;
 margin: 300px auto;
}
.bounce_1, .bounce_2{
 width: 100%;
 height: 100%;
 border-radius: 50%;
 background-color: #FFF;
 opacity: 0.6;
 position: absolute;
 top: 0;
 left: 0;
 -webkit-animation: sa-bounce 2.1s infinite ease-in-out;
 animation: sa-bounce 2.1s infinite ease-in-out;
}
.bounce_2{
 -webkit-animation-delay: -1.0s;
 animation-delay: -1.0s;
}
@keyframes sa-bounce {
0%, 100%{
 transform: scale(0.0);
 -webkit-transform:scale(0.0);
}
50%{
 transform:scale(1.0);
 -webkit-transform: scale(1.0);
} 
}
@-webkit-keyframes sa-bounce{
 0%, 100%{ -webkit-transform: scale(0.0); }
 50% { -webkit-transform:scale(1.0); }
}
</style>
</head>
<body>
<div class="loading">
 <div class="bounce_1"></div>
 <div class="bounce_2"></div>
</div>
</body>
</html>

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:

Mraj

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