1.loader-wrapper {
2  position: relative;
3  top: 0;
4  left: 0;
5  bottom: 0;
6  right: 0;
7  margin: auto;
8}
9
10.loader-wrapper .packman::before {
11  content: '';
12  position: absolute;
13  width: 50px;
14  height: 25px;
15  background-color: #EFF107;
16  border-radius: 100px 100px 0 0;
17  transform: translate(-50%, -50%);
18  animation: pac-top 0.5s linear infinite;
19  transform-origin: center bottom;
20}
21
22.loader-wrapper .packman::after {
23  content: '';
24  position: absolute;
25  width: 50px;
26  height: 25px;
27  background-color: #EFF107;
28  border-radius: 0 0 100px 100px;
29  transform: translate(-50%, 50%);
30  animation: pac-bot 0.5s linear infinite;
31  transform-origin: center top;
32}
33
34@keyframes pac-top {
35  0% {
36    transform: translate(-50%, -50%) rotate(0)
37  }
38
39  50% {
40    transform: translate(-50%, -50%) rotate(-30deg)
41  }
42
43  100% {
44    transform: translate(-50%, -50%) rotate(0)
45  }
46}
47
48@keyframes pac-bot {
49  0% {
50    transform: translate(-50%, 50%) rotate(0)
51  }
52
53  50% {
54    transform: translate(-50%, 50%) rotate(30deg)
55  }
56
57  100% {
58    transform: translate(-50%, 50%) rotate(0)
59  }
60}
61
62.dots .dot {
63  position: absolute;
64  z-index: -1;
65  top: 8px;
66  width: 10px;
67  height: 10px;
68  border-radius: 50%;
69  background: #fff;
70}
71
72.dots .dot:nth-child(1) {
73  left: 90px;
74  animation: dot-stage1 0.5s infinite;
75}
76
77.dots .dot:nth-child(2) {
78  left: 60px;
79  animation: dot-stage1 0.5s infinite;
80}
81
82.dots .dot:nth-child(3) {
83  left: 30px;
84  animation: dot-stage1 0.5s infinite;
85}
86
87.dots .dot:nth-child(4) {
88  left: 10px;
89  animation: dot-stage2 0.5s infinite;
90}
91
92@keyframes dot-stage1 {
93  0% {
94    transform: translate(0, 0);
95  }
96
97  100% {
98    transform: translate(-24px, 0);
99  }
100}
101
102@keyframes dot-stage2 {
103  0% {
104    transform: scale(1);
105  }
106
107  5%, 100% {
108    transform: scale(0);
109  }
110}
111
112
113