1.loader {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5  height: 100%;
6}
7
8.cube {
9  position: relative;
10  width: 50px;
11  height: 50px;
12  transform-style: preserve-3d;
13  animation: rotate-cube 2s infinite;
14}
15
16.face1,
17.face2,
18.face3,
19.face4,
20.face5,
21.face6 {
22  position: absolute;
23  width: 50px;
24  height: 50px;
25  background-color: transparent;
26  border: 2px solid #00BFFF;
27  box-sizing: border-box;
28}
29
30.face1 {
31  transform: rotateY(0deg) translateZ(25px);
32  animation: change-color 2s infinite;
33}
34
35.face2 {
36  transform: rotateX(90deg) translateZ(25px);
37}
38
39.face3 {
40  transform: rotateY(90deg) translateZ(25px);
41  animation: change-color 2s infinite;
42}
43
44.face4 {
45  transform: rotateY(180deg) translateZ(25px);
46  animation: change-color 2s infinite;
47}
48
49.face5 {
50  transform: rotateX(-90deg) translateZ(25px);
51}
52
53.face6 {
54  transform: rotateY(-90deg) translateZ(25px);
55  animation: change-color 2s infinite;
56}
57
58@keyframes rotate-cube {
59  from {
60    transform: rotateX(0deg) rotateY(0deg);
61  }
62
63  to {
64    transform: rotateX(360deg) rotateY(360deg);
65  }
66}
67
68@keyframes change-color {
69  0% {
70    background-color: #00BFFF;
71  }
72
73  25% {
74    background-color: #FF1493;
75  }
76
77  50% {
78    background-color: #32CD32;
79  }
80
81  75% {
82    background-color: #FFA500;
83  }
84
85  100% {
86    background-color: #00BFFF;
87  }
88}
89