Files
Iris/src/scss/components/_loader.scss
2017-08-22 08:38:03 +12:00

81 lines
1.0 KiB
SCSS
Executable File

.loader {
height: 120px;
width: 120px;
margin: 0 auto;
position: relative;
opacity: 0;
&:before,
&:after {
content: '';
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
box-sizing: border-box;
border: {
radius: 100%;
style: solid;
width: 2px;
}
}
&:before {
position: absolute;
top: 0;
left: 0;
border: {
color: lighten($dark_grey, 5%);
}
}
&:after {
@include spin();
border-top-color: transparent;
border-left-color: transparent;
border-bottom-color: transparent;
border-right-color: $blue;
}
}
.body-loader {
padding: 35vh 0;
&.loading {
.loader {
opacity: 1;
}
}
&.lazy-loader {
padding: 20px;
height: 40px;
.loader {
height: 40px;
width: 40px;
opacity: 0;
}
&.loading {
.loader {
opacity: 1;
}
}
}
}
.mini-loader {
.loader {
width: 20px;
height: 20px;
opacity: 1;
&:before {
border-color: darken($secondary_grey, 5%);
}
}
}