1.loader {
2  --uib-size: 2.8rem;
3  --uib-speed: .9s;
4  --uib-color: #183153;
5  position: relative;
6  display: flex;
7  align-items: center;
8  justify-content: flex-start;
9  height: var(--uib-size);
10  width: var(--uib-size);
11}
12
13.loaders {
14  position: absolute;
15  top: 0;
16  left: 0;
17  display: flex;
18  align-items: center;
19  justify-content: flex-start;
20  height: 100%;
21  width: 100%;
22}
23
24.loaders::before {
25  content: '';
26  height: 20%;
27  width: 20%;
28  border-radius: 50%;
29  background-color: var(--uib-color);
30  transform: scale(0);
31  opacity: 0.5;
32  animation: pulse0112 calc(var(--uib-speed) * 1.111) ease-in-out infinite;
33  box-shadow: 0 0 20px rgba(18, 31, 53, 0.3);
34  padding-bottom: 222px;
35}
36
37.loaders:nth-child(2) {
38  transform: rotate(45deg);
39}
40
41.loaders:nth-child(2)::before {
42  animation-delay: calc(var(--uib-speed) * -0.875);
43}
44
45.loaders:nth-child(3) {
46  transform: rotate(90deg);
47}
48
49.loaders:nth-child(3)::before {
50  animation-delay: calc(var(--uib-speed) * -0.75);
51}
52
53.loaders:nth-child(4) {
54  transform: rotate(135deg);
55}
56
57.loaders:nth-child(4)::before {
58  animation-delay: calc(var(--uib-speed) * -0.625);
59}
60
61.loaders:nth-child(5) {
62  transform: rotate(180deg);
63}
64
65.loaders:nth-child(5)::before {
66  animation-delay: calc(var(--uib-speed) * -0.5);
67}
68
69.loaders:nth-child(6) {
70  transform: rotate(225deg);
71}
72
73.loaders:nth-child(6)::before {
74  animation-delay: calc(var(--uib-speed) * -0.375);
75}
76
77.dot-spinner__dot:nth-child(7) {
78  transform: rotate(270deg);
79}
80
81.loaders:nth-child(7)::before {
82  animation-delay: calc(var(--uib-speed) * -0.25);
83}
84
85.loaders:nth-child(8) {
86  transform: rotate(315deg);
87}
88
89.loaders:nth-child(8)::before {
90  animation-delay: calc(var(--uib-speed) * -0.125);
91}
92
93@keyframes pulse0112 {
94  0%,
95  100% {
96    transform: scale(0);
97    opacity: 0.5;
98  }
99
100  50% {
101    transform: scale(1);
102    opacity: 1;
103  }
104}
105