.spinner { | |
margin: 10px auto; | |
width: 50px; | |
height: 40px; | |
text-align: center; | |
font-size: 10px; | |
position: relative; | |
} | |
.spinner > div { | |
background-color: #409D6D; | |
height: 100%; | |
width: 6px; | |
display: inline-block; | |
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; | |
animation: sk-stretchdelay 1.2s infinite ease-in-out; | |
} | |
.spinner .rect2 { | |
background-color: #28928E; | |
-webkit-animation-delay: -1.1s; | |
animation-delay: -1.1s; | |
} | |
.spinner .rect3 { | |
background-color: #28928E; | |
-webkit-animation-delay: -1.0s; | |
animation-delay: -1.0s; | |
} | |
.spinner .rect4 { | |
background-color: #0B85B6; | |
-webkit-animation-delay: -0.9s; | |
animation-delay: -0.9s; | |
} | |
.spinner .rect5 { | |
background-color: #0281C4; | |
-webkit-animation-delay: -0.8s; | |
animation-delay: -0.8s; | |
} | |
@-webkit-keyframes sk-stretchdelay { | |
0%, 40%, 100% { -webkit-transform: scaleY(0.4) } | |
20% { -webkit-transform: scaleY(1.0) } | |
} | |
@keyframes sk-stretchdelay { | |
0%, 40%, 100% { transform: scaleY(0.4); -webkit-transform: scaleY(0.4);} | |
20% { transform: scaleY(1.0); -webkit-transform: scaleY(1.0);} | |
} |