Loader by Tsiangana

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