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