<div class="box">
<div class="object"></div>
<span class="txt">Loading</span>
</div>
body{
background: rgb(255,255,255);
background: linear-gradient(130deg, rgba(255,255,255,1) 0%, rgba(194,236,244,1) 100%);
width: 100%;
height:100vh;
}
.box{
width: 150px;
height: 150px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.object{
width: inherit;
height: inherit;
border-radius: 100%;
background: rgb(48,207,208);
background: radial-gradient(circle, rgba(48,207,208,1) 0%, rgba(48,145,208,1) 100%);
animation: rotation 3s ease 0s infinite alternate none running;
}
.txt{
color: #fff;
font-size: 14px;
text-align: center;
width: 100%;
height: 14px;
position: absolute;
display: block;
top: 0;
bottom: 0;
margin: auto;
}
@keyframes rotation {
0% {
transform: scale(.5);
}
50% {
transform: scale(.6) rotate(-45deg);
border-radius: 10px;
}
100% {
transform: scale(1) rotate(180deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.