<div class="loader"></div>
* {
margin: 0;
padding: 0;
}
body {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
.loader {
position: relative;
width: 200px;
height: 200px;
border-radius: 10rem;
border: 3px solid white;
background: linear-gradient(#eb31b0, #e4c352, #7df8d6);
box-shadow: 0px 0px 100px -50px black;
animation: animate 1s linear infinite;
}
.loader::before {
position: absolute;
content: "";
background: #fff;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
border-radius: 10rem;
border: 3px solid white;
box-shadow: inset 0px 0px 100px -70px #111;
}
@keyframes animate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.