accounts-frontend/src/components/ui/loader/componentLoader.scss

70 lines
737 B
SCSS
Raw Normal View History

2016-08-14 14:28:14 +05:30
@import '~components/ui/colors.scss';
.componentLoader {
width: 100%;
text-align: center;
2016-08-14 14:28:14 +05:30
}
.spins {
height: 40px;
2016-08-14 14:28:14 +05:30
}
.spin {
height: 20px;
width: 20px;
display: inline-block;
margin: 10px 2px;
opacity: 0;
animation: loaderAnimation 1s infinite;
2016-08-14 14:28:14 +05:30
}
.spin1 {
animation-delay: 0s;
2016-08-14 14:28:14 +05:30
}
.spin2 {
animation-delay: 0.1s;
2016-08-14 14:28:14 +05:30
}
.spin3 {
animation-delay: 0.2s;
2016-08-14 14:28:14 +05:30
}
.spin4 {
animation-delay: 0.3s;
2016-08-14 14:28:14 +05:30
}
.spin5 {
animation-delay: 0.4s;
2016-08-14 14:28:14 +05:30
}
/**
* Skins
*/
.lightComponentLoader {
.spin {
background: #aaa;
}
2016-08-14 14:28:14 +05:30
}
.darkComponentLoader {
.spin {
background: #444;
}
2016-08-14 14:28:14 +05:30
}
@keyframes loaderAnimation {
0% {
opacity: 0;
}
2016-08-14 14:28:14 +05:30
50% {
opacity: 1;
transform: scaleY(2);
}
2016-08-14 14:28:14 +05:30
100% {
opacity: 0;
}
2016-08-14 14:28:14 +05:30
}