Simple Preloader code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Simple Preloader</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <span></span> <span></span> <span></span> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } span:nth-child(1) { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 60px; height: 60px; border: 6px solid black; border-radius: 50%; border-top: 6px solid transparent; animation: animate2 2s linear infinite; } span:nth-child(2) { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 100px; border: 6px solid black; border-radius: 50%; border-top: 6px solid transparent; animation: animate1 1s linear infinite; } span:nth-child(3) { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 20px; height: 20px; border: 6px solid black; border-radius: 50%; border-top: 6px solid transparent; animation: animate1 1s linear infinite; } @keyframes animate1 { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(360deg); } } @keyframes animate2 { 0% { transform: translate(-50%,-50%) rotate(0deg); } 100% { transform: translate(-50%,-50%) rotate(-360deg); } }
