1.spinner {
2 width: 60px;
3 height: 60px;
4 position: relative;
5}
6
7.spinner .dot {
8 position: absolute;
9 inset: 0;
10 display: flex;
11 justify-content: center;
12}
13
14.spinner .dot::after {
15 content: "";
16 width: 7px;
17 height: 7px;
18 border-radius: 50%;
19 background-color: rgb(12, 180, 231);
20}
21
22@keyframes spin {
23 to {
24  transform: rotate(360deg);
25 }
26}
27
28.spinner .dot {
29 animation: spin 2s infinite;
30}
31
32.spinner .dot:nth-child(2) {
33 animation-delay: 100ms;
34}
35
36.spinner .dot:nth-child(3) {
37 animation-delay: 200ms;
38}
39
40.spinner .dot:nth-child(4) {
41 animation-delay: 300ms;
42}
43
44.spinner .dot:nth-child(5) {
45 animation-delay: 400ms;
46}