YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Made loader animation, missing animation mixins.

Browse Source
This commit is contained in:
Dominic Masters
2018-05-08 08:33:13 +10:00
parent 0544c198e8
commit b1d29476c5
3 changed files with 41 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
public/styles/objects/_loader.scss
View File

@ -3,15 +3,30 @@
* 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
*/
@include t-keyframes(o-loader--spin) {
0% {
@include t-rotate(0deg);
}
100% {
@include t-rotate(360deg);
}
}
.o-loader {
display: block;
width: 32px;
height: 32px;
width: 64px;
height: 64px;
max-width: 100%;
max-height: 100%;
position: absolute;
left: 50%;
@ -19,12 +34,14 @@
@include t-translate(-50%, -50%);
&__image {
animation-name: k-loader;
animation-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
animation-iteration-count: infinite;
animation-duration: 1s;
@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;
}