Ajax Loader
HTML 
<div class="eyes">
1
<div class="eyes">
2
  <div class="eye eye-left"></div>
3
  <div class="eye eye-right"></div>
4
</div>
 
CSS 
body {
1
body {
2
  background: #1d0e28;
3
}
4
.eyes {
5
  width: 108px;
6
  height: 54px;
7
  position: absolute;
8
  top: 50%;
9
  left: 50%;
10
  margin-top: -27px;
11
  margin-left: -54px;
12
}
13
.eye {
14
  position: relative;
15
  background: #FFF;
16
  width: 50px;
17
  height: 50px;
18
  float: left;
19
  margin: 2px;
20
  overflow: hidden;
21
  animation: rotate 4s infinite;
22
}
23
 
24
.eye::before {
25
  position: absolute;
26
  content: "";
27
  width: 20px;
28
  height: 20px;
29
  background: #1d0e28;
30
  animation: eye 4s infinite;
31
}
32
 
33
.eye::before,
34
.eye {
35
  border-radius: 50%;
36
  -webkit-border-radius: 50%;
37
}
38
 
39
@keyframes rotate {
40
41
  0% {
42
    transform: rotate(0deg);
43
  }
44
  50% {
45
    transform: rotate(0deg);
46
  }
47
  62.5% {
48
    transform: rotate(-90deg);
49
  }
50
  87.5% {
51
    transform: rotate(90deg);
52
  }
53
  100% {
54
    transform: rotate(0deg);
55
  }
56
}
57
@-webkit-keyframes rotate {
58
  0% {
59
    transform: rotate(0deg);
60
  }
61
  50% {
62
    transform: rotate(0deg);
63
  }
64
  62.5% {
65
    transform: rotate(-90deg);
66
  }
67
  87.5% {
68
    transform: rotate(90deg);
69
  }
70
  100% {
71
    transform: rotate(0deg);
72
  }
73
}
74
 
75
@keyframes eye {
76
77
  0% {
78
    top: 15px;
79
    left: 15px;
80
  }
81
  12.5% {
82
    top: 15px;
83
    left: 5px;
84
  }
85
  25% {
86
    top: 15px;
87
    left: 15px;
88
  }
89
  37.5% {
90
    top: 15px;
91
    left: 25px;
92
  }
93
  50% {
94
    top: 15px;
95
    left: 15px;
96
  }
97
  62.5% {
98
    top: 5px;
99
    left: 15px;
100
  }
101
  87.5% {
102
    top: 5px;
103
    left: 15px;
104
  }
105
  100% {
106
    top: 15px;
107
    left: 15px;
108
  }
109
}
110
@-webkit-keyframes eye {
111
  0% {
112
    top: 15px;
113
    left: 15px;
114
  }
115
  12.5% {
116
    top: 15px;
117
    left: 5px;
118
  }
119
  25% {
120
    top: 15px;
121
    left: 15px;
122
  }
123
  37.5% {
124
    top: 15px;
125
    left: 25px;
126
  }
127
  50% {
128
    top: 15px;
129
    left: 15px;
130
  }
131
  62.5% {
132
    top: 5px;
133
    left: 15px;
134
  }
135
  87.5% {
136
    top: 5px;
137
    left: 15px;
138
  }
139
  100% {
140
    top: 15px;
141
    left: 15px;
142
  }
143
}
 

Eyes icon

CSSDeck G+