Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / New
Stats: 3,035,068 members, 7,442,043 topics. Date: Sunday, 28 May 2023 at 05:18 PM

Create Circle Loader Animation Using CSS3 - Programming - Nairaland

Nairaland Forum / Science/Technology / Programming / Create Circle Loader Animation Using CSS3 (790 Views)

Hi Guys! Created A Signup Form Using HTML5/CSS3. Source Code Available. / Learn How To Build Web Apps From Scratch Html5 Css3 Javascript(es6) Nodejs Or Go / Free HTML5, CSS3 And Basic Javascript (jquery) Training (2) (3) (4)

(1) (Reply)

Create Circle Loader Animation Using CSS3 by skptricks: 5:26am On Jan 30, 2018
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


(1) (Reply)

10 Things That Everyone Really Must Know About Drupal CMS / Please Anyone With Cooperate Account Uba / Adense Account For Sale!!!

(Go Up)

Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health
religion celebs tv-movies music-radio literature webmasters programming techmarket

Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10)

Nairaland - Copyright © 2005 - 2023 Oluwaseun Osewa. All rights reserved. See How To Advertise. 15
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or uploads on Nairaland.