60 lines
1.0 KiB
SCSS
60 lines
1.0 KiB
SCSS
/*
|
|
* Loader
|
|
* Styles for the animated loader.
|
|
*
|
|
* Dependencies:
|
|
* styles/settings/animation.scss
|
|
* styles/tools/_animation.scss
|
|
* styles/tools/_transform.scss
|
|
*
|
|
* Version:
|
|
* 1.0.0 - 2018/05/08
|
|
*/
|
|
@import '~@styles/global';
|
|
|
|
@include t-keyframes(o-loader--spin) {
|
|
0% {
|
|
@include t-rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
@include t-rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.o-loader {
|
|
display: block;
|
|
width: 64px;
|
|
height: 64px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
@include t-translate(-50%, -50%);
|
|
|
|
&__image {
|
|
@include t-animation-name(o-loader--spin);
|
|
@include t-animation-iteration-count(infinite);
|
|
@include t-animation-timing-function($s-animation--ease-in-out);
|
|
@include t-animation-duration(0.75s);
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
> * {
|
|
stroke: $s-color--loader;
|
|
}
|
|
}
|
|
|
|
&__backdrop {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
}
|
|
}
|