Loader by dimasptrautmaa

1#page {
2  display: flex;
3  justify-content: center;
4  align-items: center;
5}
6
7#container {
8  display: flex;
9  justify-content: center;
10  align-items: center;
11  position: relative;
12}
13
14#h3 {
15  color: white;
16}
17
18#ring {
19  width: 190px;
20  height: 190px;
21  border: 1px solid transparent;
22  border-radius: 50%;
23  position: absolute;
24}
25
26#ring:nth-child(1) {
27  border-bottom: 8px solid rgb(255, 141, 249);
28  animation: rotate1 2s linear infinite;
29}
30
31@keyframes rotate1 {
32  from {
33    transform: rotateX(50deg) rotateZ(110deg);
34  }
35
36  to {
37    transform: rotateX(50deg) rotateZ(470deg);
38  }
39}
40
41#ring:nth-child(2) {
42  border-bottom: 8px solid rgb(255,65,106);
43  animation: rotate2 2s linear infinite;
44}
45
46@keyframes rotate2 {
47  from {
48    transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
49  }
50
51  to {
52    transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
53  }
54}
55
56#ring:nth-child(3) {
57  border-bottom: 8px solid rgb(0,255,255);
58  animation: rotate3 2s linear infinite;
59}
60
61@keyframes rotate3 {
62  from {
63    transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
64  }
65
66  to {
67    transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
68  }
69}
70
71#ring:nth-child(4) {
72  border-bottom: 8px solid rgb(252, 183, 55);
73  animation: rotate4 2s linear infinite;
74}
75
76@keyframes rotate4 {
77  from {
78    transform: rotateX(70deg) rotateZ(270deg);
79  }
80
81  to {
82    transform: rotateX(70deg) rotateZ(630deg);
83  }
84}