HTML
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="loader">
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<span style="--i:5;"></span>
<span style="--i:6;"></span>
<span style="--i:7;"></span>
<span style="--i:8;"></span>
<span style="--i:9;"></span>
<span style="--i:10;"></span>
<span style="--i:11;"></span>
<span style="--i:12;"></span>
<span style="--i:13;"></span>
<span style="--i:14;"></span>
<span style="--i:15;"></span>
<span style="--i:16;"></span>
<span style="--i:17;"></span>
<span style="--i:18;"></span>
<span style="--i:19;"></span>
<span style="--i:20;"></span>
<div class="rocket"></div>
</div>CSS
*
{
margin:0;
padding:0;
box-sizing:border-box;
}
body
{
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
background:#03a9f4;
}
.loader
{
position:relative;
width:120px;
height:120px;
}
.loader span
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
transform:rotate(calc(18deg * var(--i)));
}
.loader span::before
{
content:'';
position:absolute;
top:0;
left:0;
width:15px;
height:15px;
background:#fff;
border-radius:50%;
transform:scale(0);
animation:animate 2s linear infinite;
animation-delay:calc(0.1s * var(--i));
}
@keyframes animate
{
0%
{
transform:scale(0);
}
10%
{
transform:scale(1.2);
}
80%,100%
{
transform:scale(0);
}
}
.rocket
{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
animation:rotating 2s linear infinite;
animation-delay:-1s;
}
@keyframes rotating
{
0%
{
transform:rotate(10deg);
}
100%
{
transform:rotate(370deg);
}
}
.rocket::before
{
content:'\\f135';
font-family:fontAwesome;
position:absolute;
top:80px;
left:85px;
color:#fff;
font-size:60px;
transform:rotate(180deg);
}
/* All the credits: https://www.youtube.com/watch?v=stYvCmQg5cs -->
Deja tu comentario