<div class="box">
<div class="flower">
<span class="petal petal01"></span>
<span class="petal petal02"></span>
<span class="petal petal03"></span>
<span class="petal petal04"></span>
<span class="petal petal05"></span>
</div>
<span class="txt">Loading...</span>
</div>
body{
width: 100%;
height:100vh;
background: rgb(189,236,237);
background: linear-gradient(122deg, rgba(189,236,237,1) 0%, rgba(255,255,255,1) 50%, rgba(255,246,226,1) 100%);
}
.box{
width: 90px;
height: 115px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.flower{
width: 90px;
height: 90px;
animation: flower 3s linear infinite;
position: relative;
transform-origin: center;
border-radius: 100%;
}
.petal{
display: block;
width: 40px;
height: 40px;
position: absolute;
border-radius: 0 70px;
background-color: #259925;
transform-origin: right bottom;
background: rgb(255,255,255);
background: linear-gradient(270deg, rgba(255,255,255,1) 0%, rgba(138,211,222,1) 100%);
animation: petal 3s ease 0s infinite alternate none running; transform-origin: center;
margin: auto;
}
.petal01{
transform: rotate(0deg);
top: 6px;
left: 2px;
}
.petal02{
transform: rotate(72deg);
top: 0;
right: 15px;
}
.petal03{
transform: rotate(144deg);
top: 30px;
right: 0;
}
.petal04{
transform: rotate(216deg);
right: 24px;
bottom: -4px;
}
.petal05{
transform: rotate(288deg);
left: -4px;
bottom: 11px;
}
.txt{
color: #8ad3de;
font-size: 16px;
display: block;
text-align: center;
transform-origin: center;
margin-top: 25px;
}
@keyframes flower{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.