1.spinner {
2 width: 44px;
3 height: 44px;
4 animation: spinner-y0fdc1 2s infinite ease;
5 transform-style: preserve-3d;
6}
7
8.spinner > div {
9 background-color: rgba(0,77,255,0.2);
10 height: 100%;
11 position: absolute;
12 width: 100%;
13 border: 2px solid #004dff;
14}
15
16.spinner div:nth-of-type(1) {
17 transform: translateZ(-22px) 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(22px);
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}