 |
| Saída gerada |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body{
background-color: white;
}
.loader-box{
position: absolute;
top: calc(50% - 25px);
left: calc(50% - 25px);
}
.loader-box, .loader-box::before, .loader-box::before{
position: absolute;
border: 3px solid transparent;
border-top: 3px solid red;
border-radius: 50%;
animation: rotate linear infinite;
content: '';
}
.loader-box{
height: 100px;
width: 100px;
animation-duration: 1.05s;
}
.loader-box::before{
height: 75px;
width: 75px;
top: 10px;
left: 10px;
animation-duration: 10s;
}
.loader-box:after{
height: 50px;
width: 50px;
top: 22px;
animation-duration: 4s;
}
@keyframes rotate {
from{
transform: translateZ(360deg);
}
to{
transform: rotateZ(360deg);
}
}
</style>
<body>
<div class="loader-box"></div>
</body>
</html>
