Loader by adamgiebl

1.loader {
2  width: 64px;
3  height: 64px;
4  position: relative;
5  background: #FFF;
6  border-radius: 4px;
7  overflow: hidden;
8}
9
10.loader:before {
11  content: "";
12  position: absolute;
13  left: 0;
14  bottom: 0;
15  width: 40px;
16  height: 40px;
17  transform: rotate(45deg) translate(30%, 40%);
18  background: #933c3c;
19  box-shadow: 32px -34px 0 5px #650a0a;
20  animation: slide 2s infinite ease-in-out alternate;
21}
22
23.loader:after {
24  content: "";
25  position: absolute;
26  left: 10px;
27  top: 10px;
28  width: 16px;
29  height: 16px;
30  border-radius: 50%;
31  background: #650a0a;
32  transform: rotate(0deg);
33  transform-origin: 35px 145px;
34  animation: rotate 2s infinite ease-in-out;
35}
36
37@keyframes slide {
38  0% , 100% {
39    bottom: -35px
40  }
41
42  25% , 75% {
43    bottom: -2px
44  }
45
46  20% , 80% {
47    bottom: 2px
48  }
49}
50
51@keyframes rotate {
52  0% {
53    transform: rotate(-15deg)
54  }
55
56  25% , 75% {
57    transform: rotate(0deg)
58  }
59
60  100% {
61    transform: rotate(25deg)
62  }
63}