Seeking assistance to modify my code for creating a unique loader design. The inner loader needs to remain static with only top and bottom segments, while the middle loader rotates anti-clockwise and the outer loader rotates clockwise. Additionally, the word "POLYU" should be included in the center of the inner loader. As I am new to coding, any help or guidance would be greatly appreciated.
body {
margin: 0;
padding: 0;
background-color: black;
}
.outerLoader {
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -50%);
border: 2px solid black;
border-bottom: 2px solid yellow;
border-radius: 50%;
box-sizing: border-box;
color: white;
animation: outerAnimate 3s linear infinite;
}
.middleLoader {
content: ' ';
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
border: 2px solid black;
border-bottom: 2px solid red;
border-radius: 50%;
animation: middleAnimate 4s linear infinite;
}
.innerLoader {
content: ' ';
position: absolute;
top: 22px;
left: 22px;
bottom: 22px;
right: 22px;
border: 2px solid black;
border-bottom: 2px solid blue;
border-top: 2px solid blue;
border-radius: 50%;
animation: static;
}
@keyframes outerAnimate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes middleAnimate {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}