אפקט ריענון
Wed Dec 16 2020 10:14:22 GMT+0000 (Coordinated Universal Time)
Saved by
@m0533127173@gmail.com
<style>
#loderp {
position: relative;
margin: auto;
width: 100%;
}
#loder {
position: absolute;
top: 50%;
left: 50%;
margin: auto;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#loder span {
width: 12px;
height: 17px;
background: #F39C12;
margin: 0px 2px;
display: inline-block;
vertical-align: middle;
animation-name: lodering;
animation-duration: 450ms;
animation-iteration-count: infinite;
animation-direction: alternate;
-webkit-animation-name: lodering;
-webkit-animation-duration: 450ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-moz-animation-name: lodering;
-moz-animation-duration: 450ms;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
}
#loder span:nth-of-type(2) {
animation-delay: 0.2s;
}
#loder span:nth-of-type(3) {
animation-delay: 0.4s;
}
#loder span:nth-of-type(4) {
animation-delay: 0.6s;
}
@keyframes lodering {
0% {
height: 17px;
}
100% {
height: 38px;
}
}
@-webkit-keyframes lodering {
0% {
height: 17px;
}
100% {
height: 38px;
}
}
@-moz-keyframes lodering {
0% {
height: 17px;
}
100% {
height: 38px;
}
}
</style>
<br><div id='loderp'><div id='loder'><span></span><span></span><span></span><span></span></div></div><br>
content_copyCOPY
Comments