WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2779
loader7
Abrir no Editor
Publique Seu Código
Precisa de um site?
1 December 2024
Cor gradiente ao passar o mouse
27 November 2024
Efeito Gaveta
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) */
