Loader by Deri-Kurniawan

1.loader {
2  perspective: 600px;
3  width: 100px;
4  height: 100px;
5}
6
7.cube {
8  width: 100%;
9  height: 100%;
10  transform-style: preserve-3d;
11  animation: rotate 4s linear infinite;
12}
13
14.face {
15  position: absolute;
16  width: 100%;
17  height: 100%;
18  opacity: 0.8;
19  border: 0.5px solid #fff;
20}
21
22.face:nth-child(1) {
23  transform: rotateX(90deg) translateZ(50px);
24}
25
26.face:nth-child(2) {
27  transform: rotateX(-90deg) translateZ(50px);
28}
29
30.face:nth-child(3) {
31  transform: translateZ(50px);
32}
33
34.face:nth-child(4) {
35  transform: rotateY(90deg) translateZ(50px);
36}
37
38.face:nth-child(5) {
39  transform: rotateY(-90deg) translateZ(50px);
40}
41
42.face:nth-child(6) {
43  transform: rotateY(180deg) translateZ(50px);
44}
45
46@keyframes rotate {
47  0% {
48    transform: rotateX(0deg) rotateY(0deg);
49  }
50
51  100% {
52    transform: rotateX(360deg) rotateY(360deg);
53  }
54}
55