Creating a bouncy animated loading effect using CSS

Goud.Kv
Posted by in CSS 3 category on for Beginner level | Points: 250 | Views : 2484 red flag

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.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Posted by: Rimi1289 on: 5/20/2014 | Points: 25
Really nice. 4 out of 5.

Login to post response

Comment using Facebook(Author doesn't get notification)