1.loader {
2  width: 120px;
3  height: 150px;
4  background-color: #fff;
5  background-repeat: no-repeat;
6  background-image: linear-gradient(#ddd 50%, #bbb 51%),
7    linear-gradient(#ddd, #ddd), linear-gradient(#ddd, #ddd),
8    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
9    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%),
10    radial-gradient(ellipse at center, #aaa 25%, #eee 26%, #eee 50%, #0000 55%);
11  background-position: 0 20px, 45px 0, 8px 6px, 55px 3px, 75px 3px, 95px 3px;
12  background-size: 100% 4px, 1px 23px, 30px 8px, 15px 15px, 15px 15px, 15px 15px;
13  position: relative;
14  border-radius: 6%;
15  animation: shake 3s ease-in-out infinite;
16  transform-origin: 60px 180px;
17}
18
19.loader:before {
20  content: "";
21  position: absolute;
22  left: 5px;
23  top: 100%;
24  width: 7px;
25  height: 5px;
26  background: #aaa;
27  border-radius: 0 0 4px 4px;
28  box-shadow: 102px 0 #aaa;
29}
30
31.loader:after {
32  content: "";
33  position: absolute;
34  width: 95px;
35  height: 95px;
36  left: 0;
37  right: 0;
38  margin: auto;
39  bottom: 20px;
40  background-color: #bbdefb;
41  background-image: linear-gradient( to right, #0004 0%, #0004 49%, #0000 50%, #0000 100% ),
42    linear-gradient(135deg, #64b5f6 50%, #607d8b 51%);
43  background-size: 30px 100%, 90px 80px;
44  border-radius: 50%;
45  background-repeat: repeat, no-repeat;
46  background-position: 0 0;
47  box-sizing: border-box;
48  border: 10px solid #DDD;
49  box-shadow: 0 0 0 4px #999 inset, 0 0 6px 6px #0004 inset;
50  animation: spin 3s ease-in-out infinite;
51}
52
53@keyframes spin {
54  0% {
55    transform: rotate(0deg)
56  }
57
58  50% {
59    transform: rotate(360deg)
60  }
61
62  75% {
63    transform: rotate(750deg)
64  }
65
66  100% {
67    transform: rotate(1800deg)
68  }
69}
70
71@keyframes shake {
72  65%, 80%, 88%, 96% {
73    transform: rotate(0.5deg)
74  }
75
76  50%, 75%, 84%, 92% {
77    transform: rotate(-0.5deg)
78  }
79
80  0%, 50%, 100% {
81    transform: rotate(0)
82  }
83}