Loader by Subaashbala

1.loaderViewPort {
2  width: 15rem; /* Background circle around the dice */
3  aspect-ratio: 1;
4  border-radius: 50%;
5  perspective: 1000px;
6  display: flex;
7  justify-content: center;
8  align-items: center;
9  border: 4px solid black;
10  animation: changeColor 5s ease infinite;
11}
12.loader {
13  /* Container for the dice*/
14  display: flex;
15  justify-content: center;
16  align-items: center;
17  transform: rotateX(90deg);
18  transform-style: preserve-3d;
19  animation: revolve 5s ease infinite;
20}
21.dot {
22  width: 1rem;
23  aspect-ratio: 1;
24  background-color: black;
25  border-radius: 50%;
26}
27.dotContainer {
28  /* Flexbox to arrange dots horizontally */
29  width: 100%;
30  height: 100%;
31  display: flex;
32  justify-content: space-around;
33  align-items: center;
34}
35.subDotContainer {
36  /* Flexbox to arrange dots vertically */
37  height: 100%;
38  display: flex;
39  flex-direction: column;
40  justify-content: space-around;
41}
42.left .dotContainer {
43  transform: rotate(45deg);
44}
45.side {
46  /* Actual sides of the dice */
47  background-color: rgba(255, 255, 255, 1);
48  padding: 1rem;
49  position: absolute;
50  width: 6em; /* Varying this will vary the Dice's size */
51  aspect-ratio: 1;
52  display: flex;
53  justify-content: center;
54  align-items: center;
55  border: 4px solid black;
56}
57.front {
58  transform: translateZ(3rem);
59}
60.back {
61  transform: translateZ(-3rem);
62}
63.back .dotContainer {
64  transform: rotate(-45deg);
65}
66.left {
67  transform: rotateY(90deg) translateZ(3rem);
68}
69.right {
70  transform: rotateY(90deg) translateZ(-3rem);
71}
72.bottom {
73  transform: translateY(3rem) rotateX(90deg);
74}
75.top {
76  transform: translateY(-3rem) rotateX(90deg);
77}
78@keyframes revolve {
79  0% {
80    transform: rotate3d(1, 0, 0, 0deg) rotate3d(0, 1, 0, 0deg)
81      rotate3d(0, 0, 1, 0deg);
82  }
83  20% {
84    transform: rotate3d(1, 0, 0, 72deg) rotate3d(0, 1, 0, 72deg)
85      rotate3d(0, 0, 1, 72deg);
86  }
87  40% {
88    transform: rotate3d(1, 0, 0, 148deg) rotate3d(0, 1, 0, 148deg)
89      rotate3d(0, 0, 1, 148deg);
90  }
91  60% {
92    transform: rotate3d(1, 0, 0, 216deg) rotate3d(0, 1, 0, 216deg)
93      rotate3d(0, 0, 1, 216deg);
94  }
95  80% {
96    transform: rotate3d(1, 0, 0, 288deg) rotate3d(0, 1, 0, 288deg)
97      rotate3d(0, 0, 1, 288deg);
98  }
99  100% {
100    transform: rotate3d(1, 0, 0, 360deg) rotate3d(0, 1, 0, 360deg)
101      rotate3d(0, 0, 1, 360deg);
102  }
103}
104@keyframes changeColor {
105  0% {
106    background-color: #00dfa2;
107  }
108  20% {
109    background-color: #f72798;
110  }
111  40% {
112    background-color: #f57d1f;
113  }
114  60% {
115    background-color: #16ff00;
116  }
117  80% {
118    background-color: #ff004d;
119  }
120  100% {
121    background-color: #00dfa2;
122  }
123}
124