CSS Pulse Loading Animation

Just a brief walkthrough to create a simple effect, to learn some basic stuff. In this tutorial, we’re creating Pulse loader animation using CSS animations. We’re using CSS keyframes to create the desired effect. The best option to reduce such heavy graphics images is using CSS methodologies to replace them. Using only basic HTML elements like div and CSS features you can create beautiful and extremely light animations.

loading_model_4.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Loading_model_4</title>
<style>
body{
 background-color:#F90;
}
.loading{
 width:60px;
 height:60px;
 margin: 300px auto;
 background-color: #FFF;
 border-radius: 100%;
 -webkit-animation: sa-scaleout 1.0s infinite ease-in-out;
 animation: sa-scaleout 1.0s infinite ease-in-out;
}
@keyframes sa-scaleout {
0%{ -webkit-transform:scale(0);
transform:scale(0);
}
100%{
 -webkit-transform:scale(1.0);
 opacity: 0;
}
}
@keyframes sa-scaleout{
 0%{
 -webkit-transform: scale(0);
 }
 100%{
 -webkit-transform: scale(1.0);
 opacity:0;
 }
}
</style>
</head>
<body>
<div class="loading"></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.

Leave a Reply