63 lines
1.2 KiB
SCSS
63 lines
1.2 KiB
SCSS
// Rotating loader
|
|
@include keyframes(spin) {
|
|
100% {
|
|
@include transform(rotate(360deg));
|
|
}
|
|
}
|
|
|
|
//Spinner
|
|
@include keyframes(fadeIn) {
|
|
0% {
|
|
@include transform(translateX(1rem));
|
|
@include filter(blur(5px));
|
|
opacity: 0;
|
|
}
|
|
1.6% {
|
|
@include transform(translateX(.2rem));
|
|
@include filter(blur(0));
|
|
opacity: 1;
|
|
}
|
|
12% {
|
|
@include transform(translateX(-.2rem));
|
|
@include filter(blur(0));
|
|
opacity: 1;
|
|
}
|
|
16% {
|
|
@include transform(translateX(-1rem));
|
|
@include filter(blur(5px));
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
@include transform(translateX(-1rem));
|
|
@include filter(blur(5px));
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
//Loading
|
|
@include keyframes(loading) {
|
|
0% {
|
|
@include filter(blur(5px));
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
@include filter(blur(0));
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@include keyframes(formSlide) {
|
|
0% {
|
|
@include filter(blur(5px));
|
|
@include transform(translateY(10rem));
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
@include filter(blur(0));
|
|
}
|
|
100% {
|
|
@include transform(translateY(0));
|
|
opacity: 1;
|
|
}
|
|
}
|