1.loader {
2  position: relative;
3}
4
5.box-1 {
6  display: flex;
7  justify-content: center;
8  align-items: center;
9  position: relative;
10  height: 150px;
11  width: 150px;
12  background-color: #FFFFFF;
13  background-image: linear-gradient(135deg, #FFFFFF 0%, #6284FF 34%, #FF0000 100%);
14  border-radius: 50%;
15  animation: rotate 3s linear infinite;
16  box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 48px;
17}
18
19@keyframes rotate {
20  0% {
21    transform: rotate(0deg);
22  }
23
24  100% {
25    transform: rotate(360deg);
26  }
27}
28
29.box-1::before {
30  content: '';
31  position: absolute;
32  inset: 15px;
33  background: #f5f5f5;
34  border-radius: 50%;
35  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
36}
37
38.loader span {
39  text-align: center;
40  position: absolute;
41  top: 65px;
42  left: 25px;
43  color: black;
44  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
45  letter-spacing: 2px;
46  font-weight: 800;
47  font-size: 1rem;
48  animation: text-animate412 3s linear infinite;
49}
50
51@keyframes text-animate412 {
52
53  10% {
54    opacity: 0;
55  }
56
57  100% {
58    opacity: 1;
59  }
60}