CSS loading spinner
A Pen by Captain Anonymous on CodePen.
CSS loading spinner
A Pen by Captain Anonymous on CodePen.
<div class="loader"> | |
<div class="inner one"></div> | |
<div class="inner two"></div> | |
<div class="inner three"></div> | |
<div class="leyend">We are creating your video</div> | |
</div> |
html { | |
height: 100%; | |
} | |
.leyend{ | |
width: 400px; | |
position: fixed; | |
margin-left: -80px; | |
margin-top: 80px; | |
font-weight: bold; | |
font-size: 15px; | |
color: #ffffff; | |
text-transform: uppercase; | |
} | |
body { | |
background-image: radial-gradient(circle farthest-corner at center, #3C4B57 0%, #1C262B 100%); | |
} | |
.loader { | |
position: absolute; | |
top: calc(50% - 32px); | |
left: calc(50% - 32px); | |
width: 64px; | |
height: 64px; | |
border-radius: 50%; | |
perspective: 800px; | |
} | |
.inner { | |
position: absolute; | |
box-sizing: border-box; | |
width: 100%; | |
height: 100%; | |
border-radius: 50%; | |
} | |
.inner.one { | |
left: 0%; | |
top: 0%; | |
animation: rotate-one 1s linear infinite; | |
border-bottom: 3px solid #EFEFFA; | |
} | |
.inner.two { | |
right: 0%; | |
top: 0%; | |
animation: rotate-two 1s linear infinite; | |
border-right: 3px solid #EFEFFA; | |
} | |
.inner.three { | |
right: 0%; | |
bottom: 0%; | |
animation: rotate-three 1s linear infinite; | |
border-top: 3px solid #EFEFFA; | |
} | |
@keyframes rotate-one { | |
0% { | |
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); | |
} | |
100% { | |
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); | |
} | |
} | |
@keyframes rotate-two { | |
0% { | |
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg); | |
} | |
100% { | |
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); | |
} | |
} | |
@keyframes rotate-three { | |
0% { | |
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg); | |
} | |
100% { | |
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); | |
} | |
} |