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: 80px;
13  width: 20px;
14  border-radius: 30px;
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}
20
21.slider::before {
22  content: "";
23  position: absolute;
24  top: 0;
25  left: 0;
26  height: 20px;
27  width: 20px;
28  border-radius: 100%;
29  box-shadow: inset 0px 0px 0px rgba(0, 0, 0, 0.3), 0px 420px 0 400px #2697f3,
30    inset 0px 0px 0px rgba(0, 0, 0, 0.1);
31  animation: animate_2 2.5s ease-in-out infinite;
32  animation-delay: calc(-0.5s * var(--i));
33}
34
35@keyframes animate_2 {
36  0% {
37    transform: translateY(250px);
38    filter: hue-rotate(0deg);
39  }
40
41  50% {
42    transform: translateY(0);
43  }
44
45  100% {
46    transform: translateY(250px);
47    filter: hue-rotate(180deg);
48  }
49}
50