1.loader {
2  width: 160px;
3  height: 185px;
4  position: relative;
5  background: #fff;
6  border-radius: 100px 100px 0 0;
7}
8
9.loader:after {
10  content: "";
11  position: absolute;
12  width: 100px;
13  height: 125px;
14  left: 50%;
15  top: 25px;
16  transform: translateX(-50%);
17  background-image: radial-gradient(circle, #000 48%, transparent 55%),
18    radial-gradient(circle, #000 48%, transparent 55%),
19    radial-gradient(circle, #fff 30%, transparent 45%),
20    radial-gradient(circle, #000 48%, transparent 51%),
21    linear-gradient(#000 20px, transparent 0),
22    linear-gradient(#cfecf9 60px, transparent 0),
23    radial-gradient(circle, #cfecf9 50%, transparent 51%),
24    radial-gradient(circle, #cfecf9 50%, transparent 51%);
25  background-repeat: no-repeat;
26  background-size: 16px 16px, 16px 16px, 10px 10px, 42px 42px, 12px 3px,
27    50px 25px, 70px 70px, 70px 70px;
28  background-position: 25px 10px, 55px 10px, 36px 44px, 50% 30px, 50% 85px,
29    50% 50px, 50% 22px, 50% 45px;
30  animation: faceLift 3s linear infinite alternate;
31}
32
33.loader:before {
34  content: "";
35  position: absolute;
36  width: 140%;
37  height: 125px;
38  left: -20%;
39  top: 0;
40  background-image: radial-gradient(circle, #fff 48%, transparent 50%),
41    radial-gradient(circle, #fff 48%, transparent 50%);
42  background-repeat: no-repeat;
43  background-size: 65px 65px;
44  background-position: 0px 12px, 145px 12px;
45  animation: earLift 3s linear infinite alternate;
46}
47
48@keyframes faceLift {
49  0% {
50    transform: translateX(-60%);
51  }
52
53  100% {
54    transform: translateX(-30%);
55  }
56}
57
58@keyframes earLift {
59  0% {
60    transform: translateX(10px);
61  }
62
63  100% {
64    transform: translateX(0px);
65  }
66}
67