1.loader {
2  position: relative;
3  width: 110px;
4  height: 30px;
5  background: #fff;
6  border-radius: 100px;
7}
8
9.loader::before {
10  content: '';
11  position: absolute;
12  top: -20px;
13  left: 10px;
14  width: 30px;
15  height: 30px;
16  background: #fff;
17  border-radius: 50%;
18  box-shadow: 40px 0 0 20px #fff;
19}
20
21.snow {
22  position: relative;
23  display: flex;
24  z-index: 1;
25}
26
27.snow span {
28  position: relative;
29  width: 3px;
30  height: 3px;
31  background: #fff;
32  margin: 0 2px;
33  border-radius: 50%;
34  animation: snowing 5s linear infinite;
35  animation-duration: calc(15s / var(--i));
36  transform-origin: bottom;
37}
38
39@keyframes snowing {
40  0% {
41    transform: translateY(0px);
42  }
43
44  70% {
45    transform: translateY(100px) scale(1);
46  }
47
48  100% {
49    transform: translateY(100px) scale(0);
50  }
51}