Loader by Subaashbala

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