This tutorial explain how to create circle loader animation using CSS3. Similarly like our previous tutorial we are using here CSS keyframe attribute to perform circle loading animation effect. This is also called as Spinner Circle Loading. All the animation effect is controlled by Keyframes Rule and it provides very smooth animation effect.
- border-radius property of css helps to transforms the loader into a circle.
- transform : rotate(0deg) or rotate(360deg) property of css helps to create circle loading animation effect using Keyframes Rule.
- border-top property where we set the color of border to blue and controlling the spinning effect using Keyframes Rule.
Keyframe Animation :
.loader { -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; border: 3px solid #ddd; border-top: 3px solid #42a5f5; border-radius: 50%; height: 75px; width: 75px; } @keyframes spin { to { border-top-color: #FF0000; -webkit-transform: rotate(360deg); transform: rotate(360deg); } }
Let see the complete source code to perform circle loading animation effect using CSS3.
<html> <head> <style> .loader { -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; border: 3px solid #ddd; border-top: 3px solid #42a5f5; border-radius: 50%; height: 75px; width: 75px; } @keyframes spin { to { border-top-color: #FF0000; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } body { background-color: #f1f2f3; } .container { width: 200px; margin: 200px auto; } </style> </head> <body> <div class="container"> <h1> Circle Loading Animation Using CSS3 </h1> <div class="loader"></div> </div> </body> </html>
Output :
Download Link :
This is all about circle loading animation effect css3 or spinner circle loading animation effect using css3. In case you have any questions please do comment in comment box below.
No comments:
Post a Comment