Loader by fahrerzeit

1.spinner {
2  width: 88px;
3  height: 88px;
4  animation: spinner-y0fdc1 2s infinite ease;
5  transform-style: preserve-3d;
6}
7
8.spinner > div {
9  background-color: rgba(0, 255, 164, 0.4);
10  height: 100%;
11  position: absolute;
12  width: 100%;
13  border: 4px solid #ffff;
14}
15
16.spinner div:nth-of-type(1) {
17  transform: translateZ(-44px) rotateY(180deg);
18}
19
20.spinner div:nth-of-type(2) {
21  transform: rotateY(-270deg) translateX(50%);
22  transform-origin: top right;
23}
24
25.spinner div:nth-of-type(3) {
26  transform: rotateY(270deg) translateX(-50%);
27  transform-origin: center left;
28}
29
30.spinner div:nth-of-type(4) {
31  transform: rotateX(90deg) translateY(-50%);
32  transform-origin: top center;
33}
34
35.spinner div:nth-of-type(5) {
36  transform: rotateX(-90deg) translateY(50%);
37  transform-origin: bottom center;
38}
39
40.spinner div:nth-of-type(6) {
41  transform: translateZ(44px);
42}
43
44@keyframes spinner-y0fdc1 {
45  0% {
46    transform: rotate(45deg) rotateX(-25deg) rotateY(25deg);
47  }
48
49  50% {
50    transform: rotate(45deg) rotateX(-385deg) rotateY(25deg);
51  }
52
53  100% {
54    transform: rotate(45deg) rotateX(-385deg) rotateY(385deg);
55  }
56}
57