Loader by adamgiebl

1.loader {
2  display: flex;
3  align-items: center;
4  justify-content: center;
5  flex-direction: row;
6}
7
8.slider {
9  overflow: hidden;
10  background-color: white;
11  margin: 0 15px;
12  height: 85px;
13  width: 16px;
14  border-radius: 15px;
15  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1), -15px -15px 30px #fff,
16      inset -5px -5px 10px rgba(0, 0, 255, 0.1),
17      inset 5px 5px 10px rgba(0, 0, 0, 0.1);
18  position: relative;
19  transform: translateY(-7px);
20}
21
22.slider::before {
23  content: "";
24  position: absolute;
25  top: 0;
26  left: 0;
27  height: 25px;
28  width: 25px;
29  border-radius: 100%;
30  box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #FF6B6B,
31      inset 0px 0px 0px rgba(0, 0, 0, 0.1);
32  animation: animate-2 2s ease-in-out infinite;
33  animation-delay: calc(-1s * var(--i));
34}
35
36@keyframes animate-2 {
37  0% {
38    transform: translateY(60px);
39    filter: hue-rotate(0deg);
40  }
41
42  50% {
43    transform: translateY(0);
44  }
45
46  100% {
47    transform: translateY(60px);
48    filter: hue-rotate(360deg);
49  }
50}