1.item1, .item2, .item3 {
2  position: absolute;
3  background-color: transparent;
4  left: calc(50% - (var(--size) / 2));
5  top: calc(50% - (var(--size) / 2));
6  height: var(--size);
7  width: var(--size);
8  border-radius: 50%;
9}
10
11.loader .item1 {
12  --size: 90px;
13  animation: size1_1 2.5s infinite alternate;
14  z-index: 1;
15}
16
17.loader .item2 {
18  --size: 60px;
19  animation: size1_2 2.5s infinite alternate;
20  z-index: 2;
21}
22
23.loader .item3 {
24  --size: 30px;
25  animation: size1_3 2.5s infinite alternate;
26  z-index: 3;
27}
28
29@keyframes size1_1 {
30  0%,
31  10% {
32    transform: scale(0);
33  }
34
35  100% {
36    transform: scale(1);
37    box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;
38  }
39}
40
41@keyframes size1_2 {
42  0%,
43  40% {
44    transform: scale(0);
45  }
46
47  100% {
48    transform: scale(1);
49    box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;
50  }
51}
52
53@keyframes size1_3 {
54  0%,
55  70% {
56    transform: scale(0);
57  }
58
59  100% {
60    transform: scale(1);
61    box-shadow: 8px 8px 14px #c5c5c5, -8px -8px 14px #ffffff;
62  }
63}