loader from http://letters-inc.jp/
loader from http://letters-inc.jp/
A Pen by LegoMushroom on CodePen.
<div class="loadcenter"> | |
<div class="loadcenter_wrap"> | |
<svg class="l1" width="320px" height="320px"> | |
<path d="M160,0.5C212.9,53.4,319.5,160,319.5,160 L160,319.5L0.5,160L160,0.5z"></path> | |
</svg> | |
<svg class="l2" width="320px" height="320px"> | |
<path d="M160,40.5C184,64.5,279.5,160,279.5,160 L160,279.5L40.5,160L160,40.5z"></path> | |
</svg> | |
<svg class="l3" width="320px" height="320px"> | |
<path d="M160,80.5c21.7,21.7,79.5,79.5,79.5,79.5 L160,239.5L80.5,160L160,80.5z"></path> | |
</svg> | |
</div> | |
</div> | |
loader from http://letters-inc.jp/
A Pen by LegoMushroom on CodePen.
body{ | |
background-color: black; | |
} | |
.loadcenter_wrap { | |
position: relative; | |
-moz-perspective: 500px; | |
-webkit-perspective: 500; | |
-o-perspective: 500; | |
-ms-perspective: 500; | |
} | |
.loadcenter_wrap p { | |
position: absolute; | |
z-index: 2; | |
width: 100%; | |
text-align: center; | |
color: #fff; | |
} | |
.loadcenter { | |
height: 320px; | |
width: 320px; | |
margin: -160px 0 0 -160px; | |
top: 50%; | |
left: 50%; | |
position: absolute; | |
} | |
.loadcenter svg { | |
position: absolute; | |
top: 0; | |
left: 0; | |
-webkit-transform-origin: center center; | |
-ms-transform-origin: center center; | |
-o-transform-origin: center center; | |
transform-origin: center center; | |
-webkit-transition: all 0.3s; | |
-o-transition: all 0.3s; | |
transition: all 0.3s; | |
-webkit-transform: rotateY(0deg); | |
-ms-transform: rotateY(0deg); | |
-o-transform: rotateY(0deg); | |
transform: rotateY(0deg); | |
} | |
.loadcenter path { | |
fill: none; | |
stroke: #fff; | |
stroke-width: 1; | |
fill: none; | |
-webkit-transition: all .3s; | |
-o-transition: all .3s; | |
transition: all .3s; | |
} | |
.loadcenter .l1 path { | |
stroke-dasharray: 450; | |
stroke-dashoffset: 900; | |
-webkit-animation: LOADING1 4s linear 0s infinite; | |
-o-animation: LOADING1 4s linear 0s infinite; | |
animation: LOADING1 4s linear 0s infinite; | |
} | |
.loadcenter .l2 path { | |
stroke-dasharray: 340; | |
stroke-dashoffset: 340; | |
animation: LOADING2 3s linear 0s infinite; | |
} | |
.loadcenter .l3 path { | |
stroke-dasharray: 230; | |
stroke-dashoffset: 230; | |
animation: LOADING3 2s linear 0s infinite; | |
} | |
@keyframes LOADING1 { | |
0% { | |
stroke-dashoffset: -900; | |
} | |
50% { | |
stroke-dashoffset: 0; | |
} | |
100% { | |
stroke-dashoffset: 900; | |
} | |
} | |
@keyframes LOADING2 { | |
0% { | |
stroke-dashoffset: 340; | |
} | |
50% { | |
stroke-dashoffset: 0; | |
} | |
100% { | |
stroke-dashoffset: -340; | |
} | |
} | |
@keyframes LOADING3 { | |
0% { | |
stroke-dashoffset: -230; | |
} | |
50% { | |
stroke-dashoffset: 0; | |
} | |
100% { | |
stroke-dashoffset: 230; | |
} | |
} | |
.loadcenter_wrap .l1 { | |
animation: TURN 2.5s linear 0s infinite; | |
} | |
.loadcenter_wrap .l2 { | |
animation: TURN 2s linear 0s infinite; | |
} | |
.loadcenter_wrap .l3 { | |
animation: TURN 1.5s linear 0s infinite; | |
} | |
@-webkit-keyframes TURN { | |
0% { | |
-webkit-transform: rotateY(0deg); | |
opacity: 1 | |
} | |
25% { | |
-webkit-transform: rotateY(90deg); | |
opacity: .6 | |
} | |
50% { | |
-webkit-transform: rotateY(180deg); | |
opacity: 1 | |
} | |
75% { | |
-webkit-transform: rotateY(270deg); | |
opacity: .6 | |
} | |
100% { | |
-webkit-transform: rotateY(360deg); | |
opacity: 1 | |
} | |
} | |
@-webkit-keyframes TURNBACK { | |
0% { | |
-webkit-transform: rotateY(360deg); | |
opacity: 1 | |
} | |
25% { | |
-webkit-transform: rotateY(270deg); | |
opacity: .6 | |
} | |
50% { | |
-webkit-transform: rotateY(180deg); | |
opacity: 1 | |
} | |
75% { | |
-webkit-transform: rotateY(90deg); | |
opacity: .6 | |
} | |
100% { | |
-webkit-transform: rotateY(0deg); | |
opacity: 1 | |
} | |
} |