1.loader {
2  width: 96px;
3  height: 48px;
4  display: inline-block;
5  position: relative;
6  background: #5e5e5e;
7  border-radius: 48px 48px 0 0;
8  box-sizing: border-box;
9  overflow: hidden;
10}
11
12.loader::after {
13  content: '';
14  box-sizing: border-box;
15  position: absolute;
16  width: 24px;
17  height: 12px;
18  border-radius: 24px 24px 0 0;
19  background: yellow;
20  left: 50%;
21  transform: translateX(-50%);
22  bottom: 0;
23}
24
25.loader::before {
26  content: '';
27  position: absolute;
28  width: 4px;
29  height: 32px;
30  left: 0;
31  right: 0;
32  margin: auto;
33  bottom: 0;
34  background: yellow;
35  transform-origin: 50% 100%;
36  box-sizing: border-box;
37  animation: animloader 2s linear infinite alternate;
38}
39
40@keyframes animloader {
41  0% {
42    transform: rotate(-70deg);
43  }
44
45  10% {
46    transform: rotate(-40deg);
47  }
48
49  20%, 45%, 35% {
50    transform: rotate(-10deg);
51  }
52
53  40%, 30% {
54    transform: rotate(-30deg);
55  }
56
57  50%, 60% {
58    transform: rotate(20deg);
59  }
60
61  55%, 65%, 75% {
62    transform: rotate(40deg);
63  }
64
65  70% {
66    transform: rotate(45deg);
67  }
68
69  85%, 90% {
70    transform: rotate(50deg);
71  }
72
73  95% {
74    transform: rotate(75deg);
75  }
76
77  100%, 93% {
78    transform: rotate(70deg);
79  }
80}