Glowing Circle Loading Animation

Glowing Circle Loading Animation Code:

1.index.html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Glowing Circle Loading Animation</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> ¨K0K </body> </html>

2.style.css:

body { margin: 0; padding: 0; background: black; } .loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; box-sizing: border-box; } .loader::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; border: 2px solid red; border-radius: 50%; box-sizing: border-box; animation: animate 2s linear infinite; } .loader::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 0; height: 0; border: 2px solid red; border-radius: 50%; box-sizing: border-box; animation: animate 2s linear infinite; animation-delay: 1s; } @keyframes animate { 0% { width: 0; height: 0; border: 4px solid red; box-shadow: 0 0 10px red; opacity: 1; } 70% { opacity: 1; } 100% { width: 100%; height: 100%; border: 4px solid red; box-shadow: 0 0 100px red; opacity: 1; } }

Оставьте комментарий