Howto

How To Create A Loader Using Html And Css

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 this far! If you found value in this, we’d really appreciate it if you recommend this post (by clicking the share buttons) so other people can learn!

Found this Howto helpful? Subscribe for more!

You may also learn:

Comments
To Top