WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sxrgxx</title> <link rel="stylesheet" href="styles.css"> </head> <body> <span class="loader"></span> </body> </html>
body { background: #000000; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .loader { display: block; width: 84px; height: 84px; position: relative; } .loader:before , .loader:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; height: 64px; border-radius: 50%; background: #ffffff; transform: translate(-50% , -100%) scale(0); animation: push_401 2s infinite linear; } .loader:after { animation-delay: 1s; } @keyframes push_401 { 0% , 50% { transform: translate(-50% , 0%) scale(1) } 100% { transform: translate(-50%, -100%) scale(0) } }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sxrgxx</title> <link rel="stylesheet" href="styles.css"> </head> <body> <span class="loader"></span> </body> </html>
body { background: #000000; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .loader { display: block; width: 84px; height: 84px; position: relative; } .loader:before , .loader:after { content: ""; position: absolute; left: 50%; bottom: 0; width: 64px; height: 64px; border-radius: 50%; background: #ffffff; transform: translate(-50% , -100%) scale(0); animation: push_401 2s infinite linear; } .loader:after { animation-delay: 1s; } @keyframes push_401 { 0% , 50% { transform: translate(-50% , 0%) scale(1) } 100% { transform: translate(-50%, -100%) scale(0) } }
/* Replace with your JS Code (Leave empty if not needed) */