<html>
<body>
<div class="main">
<div class="spin1">
<div class="spin2">
<div class="spin3">
<div class="spin4">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.main{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.spin4{
height: 50px;
width: 50px;
border-bottom: 5px solid yellow;
border-radius: 100%;
animation: spin4 3s infinite linear;
}
.spin3{
padding: 2px;;
border-right: 5px solid rgb(2, 2, 2);
border-radius: 100%;
animation: spin3 3s infinite linear;
}
.spin2{
padding: 2px;;
border-top: 5px solid red;
border-radius: 100%;
animation: spin2 3s infinite linear;
}
.spin1{
padding: 2px;;
border-left: 5px solid blue;
border-radius: 100%;
animation: spin1 3s infinite linear;
}
@keyframes spin1 {
0%{
transform:rotate(0deg)
}
100%{
transform:rotate(360deg)
}
}
@keyframes spin2 {
0%{
transform:rotate(360deg)
}
100%{
transform:rotate(-360deg)
}
}
@keyframes spin3 {
0%{
transform:rotate(-360deg)
}
100%{
transform:rotate(360deg)
}
}
@keyframes spin4 {
0%{
transform:rotate(360deg)
}
100%{
transform:rotate(-360deg)
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.