It is possible to create little animation effects using CSS instead of JQuery. In this article, we are going to see a little loading animation effect using CSS without JQuery.
Introduction
We can use JQuery to provide wide variety of animation effects to the website. Lets try creating animation effects using CSS.
Objective
Our Objective is to create a bouncy animated loading effect that can beautify the loading bar using CSS.
Using the code in Aspx page
Just take a division in your aspx page and assign a class with name 'loader'.
<div class="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
Add the stylesheet link in your
aspx page.
<link href="Style.css" rel="stylesheet" type="text/css" />
Using the code in CSS
Now use below code in your
Style.css.
.loader {
text-align: center;
}
.loader span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: red;
border-radius: 10px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
.loader span:nth-of-type(4) {
-webkit-animation-delay: 0.9s;
-moz-animation-delay: 0.9s;
}
.loader span:nth-of-type(5) {
-webkit-animation-delay: 1.2s;
-moz-animation-delay: 1.2s;
}
.loader span:nth-of-type(6) {
-webkit-animation-delay: 1.5s;
-moz-animation-delay: 1.5s;
}
.loader span:nth-of-type(7) {
-webkit-animation-delay: 1.8s;
-moz-animation-delay: 1.8s;
}
.loader span:nth-of-type(8) {
-webkit-animation-delay: 2.1s;
-moz-animation-delay: 2.1s;
}
@-webkit-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
@-moz-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}In the above Style.css, we have given the equal incrementing of time to all the spans of your aspx page.
Output
Check the output in your browser and you will see the animated loader like below.
Conclusion
In this article we have seen the easy way to create a loader with bouncy animated effect. Hope you understand the article. If you have any doubts on this article, please reply below and let me know them.
Thanks for reading.
Regards,
Krishna.