Website loader is the most important element for website. Before loading the website content, the preloader is showing, in today’s article, we will create a pure CSS website loader without using any jQuery and Javascript language, we will use pure CSS.
Contents
hide
What is Preloader?
The preloader is the most important element of the website because if any website takes 10 seconds to load these days, what do we do? So we shut down the website, so in this situation, we need to add a preloader to our website. The visitor will not speak in loading time. In this article, we will create a pure CSS website loader.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Pure CSS Loading Spinner</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="loader"> <div class="spinner"> </div> </div> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
.loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .spinner { width: 100px; height: 100px; border-radius: 50%; border: 3px solid transparent; border-top-color: red; border-right-color: red; border-bottom-color: red; animation: load 1s linear infinite; } @keyframes load { 25% { transform: rotate(100deg); border-top-color: #F20DEA; border-right-color: #F20DEA; border-bottom-color: #F20DEA; } 50% { transform: rotate(200deg); border-top-color: #0CF43D; border-right-color: #0CF43D; border-bottom-color: #0CF43D; } 75% { transform: rotate(300deg); border-top-color: #E9F70D; border-right-color: #E9F70D; border-bottom-color: #E9F70D; } 100% { transform: rotate(360deg); border-top-color: #064FF5; border-right-color: #064FF5; border-bottom-color: #064FF5; } } |
