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  background: linear-gradient(45deg, #3498db, #e74c3c);
19  opacity: 0.8;
20  border: 0.5px solid #fff;
21  border-radius: 25%;
22}
23
24.face:nth-child(1) {
25  transform: rotateX(90deg) translateZ(50px);
26}
27
28.face:nth-child(2) {
29  transform: rotateX(-90deg) translateZ(50px);
30}
31
32.face:nth-child(3) {
33  transform: translateZ(50px);
34}
35
36.face:nth-child(4) {
37  transform: rotateY(90deg) translateZ(50px);
38}
39
40.face:nth-child(5) {
41  transform: rotateY(-90deg) translateZ(50px);
42}
43
44.face:nth-child(6) {
45  transform: rotateY(180deg) translateZ(50px);
46}
47
48@keyframes rotate {
49  0% {
50    transform: rotateX(0deg) rotateY(0deg);
51  }
52
53  100% {
54    transform: rotateX(360deg) rotateY(360deg);
55  }
56}
57