1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Loading Animation</title>
7 <style>
8 body {
9 background-color: #000;
10 display: flex;
11 justify-content: center;
12 align-items: center;
13 height: 100vh;
14 margin: 0;
15 }
16 .loading-button {
17 position: relative;
18 width: 150px;
19 height: 40px;
20 border-radius: 5px;
21 background-color: #1a1a1a;
22 border: none;
23 font-family: Arial, sans-serif;
24 font-size: 18px;
25 color: #fff;
26 cursor: pointer;
27 }
28 .loading-button::before {
29 content: "";
30 position: absolute;
31 top: 0;
32 left: 0;
33 width: 100%;
34 height: 100%;
35 border: 2px solid transparent;
36 border-radius: 5px;
37 animation: glow 2s infinite;
38 }
39 @keyframes glow {
40 0% {
41 border-color: #00ff00;
42 box-shadow: 0 0 10px #00ff00;
43 }
44 50% {
45 border-color: #ff00ff;
46 box-shadow: 0 0 10px #ff00ff;
47 }
48 100% {
49 border-color: #00ff00;
50 box-shadow: 0 0 10px #00ff00;
51 }
52 }
53 </style>
54</head>
55<body>
56 <button class="loading-button">LOADING</button>
57 <script>
58 // No JavaScript needed for this animation
59 </script>
60</body>
61</html>