Loader by pasha43

1.loader {
2  position: absolute;
3  top: 50%;
4  left: 50%;
5  transform: translate(-50%, -50%);
6  perspective: 800px;
7}
8
9.loader-cube {
10  width: 100px;
11  height: 100px;
12  position: relative;
13  transform-style: preserve-3d;
14  transform-origin: 50% 50%;
15  animation: rotate 4s infinite linear;
16}
17
18.loader-cube:before,
19.loader-cube:after {
20  content: "";
21  position: absolute;
22  width: 100%;
23  height: 100%;
24  background-color: transparent;
25}
26
27.loader-cube:before {
28  transform: rotateX(90deg) translateZ(50px);
29}
30
31.loader-cube:after {
32  transform: rotateY(90deg) translateZ(50px);
33}
34
35.loader-cube .face {
36  position: absolute;
37  width: 100%;
38  height: 100%;
39  background-color: rgb(252, 248, 248);
40  opacity: 0.8;
41  border: 2px solid rgb(252, 250, 250);
42}
43
44.loader-cube .face:nth-child(1) {
45  transform: rotateY(0deg) translateZ(50px);
46  background-color: #e74c3c;
47}
48
49.loader-cube .face:nth-child(2) {
50  transform: rotateX(90deg) translateZ(50px);
51  background-color: #3498db;
52}
53
54.loader-cube .face:nth-child(3) {
55  transform: rotateY(180deg) translateZ(50px);
56  background-color: #2ecc71;
57}
58
59.loader-cube .face:nth-child(4) {
60  transform: rotateX(-90deg) translateZ(50px);
61  background-color: #f1c40f;
62}
63
64.loader-cube .face:nth-child(5) {
65  transform: rotateY(90deg) translateZ(50px);
66  background-color: #9b59b6;
67}
68
69.loader-cube .face:nth-child(6) {
70  transform: rotateY(0deg) translateZ(-50px);
71  background-color: #1abc9c;
72}
73
74@keyframes rotate {
75  0% {
76    transform: rotateY(0deg) rotateX(0deg);
77  }
78
79  100% {
80    transform: rotateY(1turn) rotateX(1turn);
81  }
82}
83