Whenever we add any kind of AJAX request on page, we also add a gif animation to show that your request has been processed. Most of us use loading bar or loading circle like animated GIF images. Do you know that you can add the same kind of animation effect with CSS. By manipulating HTML objects only with CSS you get similar kind of animation effect as you get with GIF. If you are not expert in CSS or do not have any idea of how to get this, you can use CSSLoad.net. This is an awesome website to get CSS code snippets of various loading animation.
Visit CSSLoad.net and select the loading animation from the dropdown just below the logo. Then select the colors, width, height and speed of animation from top tool bar.
You can also reverse the animation if you want. When you done with customization, click on “Get Code” button. It will generate the CSS code. Just place this code on your website to get CSS animation effect.
CSS animation is not a new thing. It was added back in 2007 when webkit decided to add animation and transformation. This is supported by most of the latest browser. You can see the list of all supported web browsers here.
This is really a cool website to get animation codes. You can also use this website to know how to create different kind of animation with CSS and then modify the code to create your own animation. Code and learn 😀