1.loader {
2  position: relative;
3  width: 78px;
4  height: 78px;
5  border-radius: 50%;
6  background: #fff;
7  border: 8px solid #131a1d;
8  overflow: hidden;
9  box-sizing: border-box;
10}
11
12.loader::after {
13  content: '';
14  position: absolute;
15  left: 0;
16  top: -50%;
17  width: 100%;
18  height: 100%;
19  background: #263238;
20  z-index: 5;
21  border-bottom: 8px solid #131a1d;
22  box-sizing: border-box;
23  animation: eyeShade 3s infinite;
24}
25
26.loader::before {
27  content: '';
28  position: absolute;
29  left: 20px;
30  bottom: 15px;
31  width: 32px;
32  z-index: 2;
33  height: 32px;
34  background: #111;
35  border-radius: 50%;
36  animation: eyeMove 3s infinite;
37}
38
39@keyframes eyeShade {
40  0% {
41    transform: translateY(0)
42  }
43
44  20% {
45    transform: translateY(5px)
46  }
47
48  40% , 50% {
49    transform: translateY(-5px)
50  }
51
52  60% {
53    transform: translateY( -8px)
54  }
55
56  75% {
57    transform: translateY( 5px)
58  }
59
60  100% {
61    transform: translateY(10px)
62  }
63}
64
65@keyframes eyeMove {
66  0% {
67    transform: translate(0 , 0)
68  }
69
70  20% {
71    transform: translate(0px , 5px)
72  }
73
74  40% , 50% {
75    transform: translate(0px , -5px)
76  }
77
78  60% {
79    transform: translate(-10px , -5px)
80  }
81
82  75% {
83    transform: translate(-20px , 5px)
84  }
85
86  100% {
87    transform: translate(0 , 10px)
88  }
89}