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 margin: 0;
10 background-color: #fff;
11 }
12 .loader-container {
13 position: relative;
14 width: 100%;
15 height: 100vh;
16 background-color: #fff;
17 display: flex;
18 justify-content: center;
19 align-items: center;
20 }
21 .loader {
22 position: absolute;
23 top: 50%;
24 transform: translateY(-50%);
25 width: 100%;
26 height: 50px;
27 background-color: #ff0000;
28 border-bottom: 1px solid #fff;
29 }
30 .loader::before {
31 content: '';
32 position: absolute;
33 top: 50%;
34 left: 50%;
35 transform: translate(-50%, -50%);
36 width: 24px;
37 height: 24px;
38 border-radius: 50%;
39 border: 2px solid #000;
40 border-top-color: transparent;
41 border-right-color: transparent;
42 animation: spin 1s linear infinite;
43 }
44 @keyframes spin {
45 0% {
46 transform: translate(-50%, -50%) rotate(0deg);
47 }
48 100% {
49 transform: translate(-50%, -50%) rotate(360deg);
50 }
51 }
52 </style>
53</head>
54<body>
55 <div class="loader-container">
56 <div class="loader"></div>
57 </div>
58</body>
59</html>