WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2918
loader7
Abrir no Editor
Publique Seu Código
Recomendado
12 April 2025
Um Código por fadlanbryan22
16 July 2025
botão
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loading Screen</title> <link rel="stylesheet" href="/css/styles3.css"> </head> <body> <div class="loader"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> <div class="square"></div></div> </body> </html>
CSS
Copy
body { display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; background-color: #34495e; } .loader { display: flex; justify-content: space-between; width: 100px; } .circle { width: 20px; height: 20px; background-color: #fff; border-radius: 50%; animation: fade 1s infinite; } .circle:nth-child(1) { animation-delay: 0.2s; } .circle:nth-child(2) { animation-delay: 0.4s; } .circle:nth-child(3) { animation-delay: 0.6s; } @keyframes fade { 0%, 20%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */
