How To Create A Loader Using Html And Css

 

Step 1 Add HTML:

<div class=”loader”></div>

 

Step 2) Add CSS:

Example

.loader {

border: 16px solid #f3f3f3; /* Light grey */

border-top: 16px solid #3498db; /* Blue */

border-radius: 50%;

width: 120px;

height: 120px;

animation: spin 2s linear infinite;

}

@keyframes spin {

0% { transform: rotate(0deg); }

100% { transform: rotate(360deg); }

}

.loader {

border-top: 16px solid blue;

border-bottom: 16px solid blue;

}

Example

.loader {

border-top: 16px solid blue;

border-right: 16px solid green;

border-bottom: 16px solid red;

}

.loader {

border-top: 16px solid blue;

border-right: 16px solid green;

border-bottom: 16px solid red;

border-left: 16px solid pink;

}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


P.S. Thanks for reading to the end. If you found value in this, kindly recommend (by clicking the share buttons below) so other people can learn too!
Is there a Howto you'd love to learn? We'll be glad to create it for you, let us know in the comments. Cheers!

CONTACT US

We're always here. You can send us an email and we'll get back to you, asap.

Sending

© 2015 - 2018 Howtos.ng

or

Log in with your credentials

Forgot your details?