WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2778
loader7
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Brauchen Sie eine Website?
22 April 2025
Ein Code von andres.stahr
24 November 2024
Schuhgeschäft
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) */
