1.dot-spinner {
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.dot-spinner__dot {
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.dot-spinner__dot::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}
35
36.dot-spinner__dot:nth-child(2) {
37  transform: rotate(45deg);
38}
39
40.dot-spinner__dot:nth-child(2)::before {
41  animation-delay: calc(var(--uib-speed) * -0.875);
42}
43
44.dot-spinner__dot:nth-child(3) {
45  transform: rotate(90deg);
46}
47
48.dot-spinner__dot:nth-child(3)::before {
49  animation-delay: calc(var(--uib-speed) * -0.75);
50}
51
52.dot-spinner__dot:nth-child(4) {
53  transform: rotate(135deg);
54}
55
56.dot-spinner__dot:nth-child(4)::before {
57  animation-delay: calc(var(--uib-speed) * -0.625);
58}
59
60.dot-spinner__dot:nth-child(5) {
61  transform: rotate(180deg);
62}
63
64.dot-spinner__dot:nth-child(5)::before {
65  animation-delay: calc(var(--uib-speed) * -0.5);
66}
67
68.dot-spinner__dot:nth-child(6) {
69  transform: rotate(225deg);
70}
71
72.dot-spinner__dot:nth-child(6)::before {
73  animation-delay: calc(var(--uib-speed) * -0.375);
74}
75
76.dot-spinner__dot:nth-child(7) {
77  transform: rotate(270deg);
78}
79
80.dot-spinner__dot:nth-child(7)::before {
81  animation-delay: calc(var(--uib-speed) * -0.25);
82}
83
84.dot-spinner__dot:nth-child(8) {
85  transform: rotate(315deg);
86}
87
88.dot-spinner__dot:nth-child(8)::before {
89  animation-delay: calc(var(--uib-speed) * -0.125);
90}
91
92@keyframes pulse0112 {
93  0%,
94  100% {
95    transform: scale(0);
96    opacity: 0.5;
97  }
98
99  50% {
100    transform: scale(1);
101    opacity: 1;
102  }
103}
104