1.loading {
2  width: 100px;
3  height: 100px;
4  background: white;
5  border-radius: 12px;
6  position: relative;
7  transform-style: preserve-3d;
8  animation: loading_4123 2s linear infinite;
9}
10
11.side {
12  background: white;
13  border-radius: 12px;
14}
15
16.front, .back {
17  width: 100px;
18  height: 100px;
19}
20
21.front, .back {
22  position: absolute;
23  left: 0;
24  right: 0;
25  top: 0;
26  bottom: 0;
27}
28
29.back {
30  transform: translateZ(-10px);
31}
32
33.left, .right {
34  width: 10px;
35  height: calc(100% - 12px);
36  top: 6px;
37  position: absolute;
38  background: #efefef;
39}
40
41.left {
42  left: 0;
43  transform-origin: 0;
44  transform: rotateY(90deg);
45}
46
47.right {
48  right: 0;
49  transform-origin: 100%;
50  transform: rotateY(-90deg);
51}
52
53.top, .bottom {
54  width: calc(100% - 12px);
55  height: 10px;
56  position: absolute;
57  left: 6px;
58  background: #efefef;
59}
60
61.top {
62  top: -10px;
63  transform-origin: 0 100%;
64  transform: rotateX(90deg);
65}
66
67.bottom {
68  bottom: -10px;
69  transform-origin: 0 0;
70  transform: rotateX(-90deg);
71}
72
73@keyframes loading_4123 {
74  0% {
75    transform: rotate(0);
76  }
77
78  50% {
79    transform: rotateY(180deg);
80  }
81
82  100% {
83    transform: rotateY(180deg) rotateX(-180deg);
84  }
85}