wekan/client/components/main/spinner_cube.styl

53 lines
1.5 KiB
Stylus
Raw Normal View History

@import 'nib'
// From https://github.com/tobiasahlin/SpinKit
.sk-spinner-cube {
margin: 100px auto;
width: 40px;
height: 40px;
position: relative;
}
.sk-cube1, .sk-cube2 {
background-color: #333;
width: 15px;
height: 15px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
animation: sk-cubemove 1.8s infinite ease-in-out;
}
.sk-cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
@-webkit-keyframes sk-cubemove {
25% { -webkit-transform: translateX(35px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(35px) translateY(35px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}
@keyframes sk-cubemove {
25% {
transform: translateX(35px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(35px) rotate(-90deg) scale(0.5);
} 50% {
transform: translateX(35px) translateY(35px) rotate(-179deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-179deg);
} 50.1% {
transform: translateX(35px) translateY(35px) rotate(-180deg);
-webkit-transform: translateX(35px) translateY(35px) rotate(-180deg);
} 75% {
transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(35px) rotate(-270deg) scale(0.5);
} 100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}