Loader by Abrar-Hussain1

1.loader-container {
2  display: flex;
3  flex-direction: column;
4  justify-content: center;
5  align-items: center;
6  height: 100vh;
7}
8
9.loader {
10  width: 70px;
11  height: 70px;
12  position: relative;
13}
14
15.loader:before {
16  content: "";
17  width: 70px;
18  height: 70px;
19  border-radius: 50%;
20  border: 6px solid #007bff;
21  position: absolute;
22  top: 0;
23  left: 0;
24  animation: pulse 1s ease-in-out infinite;
25}
26
27.loader:after {
28  content: "";
29  width: 70px;
30  height: 70px;
31  border-radius: 50%;
32  border: 6px solid transparent;
33  border-top-color: #007bff;
34  position: absolute;
35  top: 0;
36  left: 0;
37  animation: spin 2s linear infinite;
38}
39
40.loader-text {
41  font-size: 24px;
42  margin-top: 20px;
43  color: #007bff;
44  font-family: Arial, sans-serif;
45  text-align: center;
46  text-transform: uppercase;
47}
48
49@keyframes pulse {
50  0% {
51    transform: scale(0.6);
52    opacity: 1;
53  }
54  50% {
55    transform: scale(1.2);
56    opacity: 0;
57  }
58  100% {
59    transform: scale(0.6);
60    opacity: 1;
61  }
62}
63
64@keyframes spin {
65  0% {
66    transform: rotate(0deg);
67  }
68  100% {
69    transform: rotate(360deg);
70  }
71}
72
73.content {
74  display: none;
75}
76
77.loaded .loader-container {
78  display: none;
79}
80
81.loaded .content {
82  display: block;
83}
84