WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pure CSS 3D Glowing Loader Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <div class="round">Loading</div> </div> </body> </html>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #021514; } .loader { perspective: 800px; } .round { position: relative; width: 200px; height: 200px; border-radius: 50%; animation: animate 4s linear infinite; display: grid; place-content: center; color: #01b4f9; box-shadow: 0 0 100px #01b4f9, 0 0 20px #01b4f9, 0 0 30px #01b4f9; font-family: impact; font-size: 35px; border: 15px outset #01b4f9; } @keyframes animate { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } }
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Pure CSS 3D Glowing Loader Animation</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loader"> <div class="round">Loading</div> </div> </body> </html>
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #021514; } .loader { perspective: 800px; } .round { position: relative; width: 200px; height: 200px; border-radius: 50%; animation: animate 4s linear infinite; display: grid; place-content: center; color: #01b4f9; box-shadow: 0 0 100px #01b4f9, 0 0 20px #01b4f9, 0 0 30px #01b4f9; font-family: impact; font-size: 35px; border: 15px outset #01b4f9; } @keyframes animate { 0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } }
/* Replace with your JS Code (Leave empty if not needed) */