₦airaland Forum

Post link : http://www.skptricks.com/2018/01/create-circle-loader-animation-using-css3.html

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 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.

Post link : http://www.skptricks.com/2018/01/create-circle-loader-animation-using-css3.html


https://www.youtube.com/watch?v=ZHVupGqO60I