48 lines
981 B
SCSS
48 lines
981 B
SCSS
|
@import "../variables/colors";
|
||
|
|
@import "../variables/mixins";
|
||
|
|
@import "../variables/sizes";
|
||
|
|
|
||
|
|
// The typical spinner we use, a circle with a infinite, rotating piece
|
||
|
|
// Example usage:
|
||
|
|
// <div class="Spinner"></div>
|
||
|
|
.Spinner {
|
||
|
|
position: relative;
|
||
|
|
margin: 0 auto;
|
||
|
|
animation: load8 1.1s infinite linear;
|
||
|
|
border-top: 2px solid $cStructure-mainLine;
|
||
|
|
border-right: 2px solid $cStructure-mainLine;
|
||
|
|
border-bottom: 2px solid $cStructure-mainLine;
|
||
|
|
border-left: 2px solid $cHighlight-main;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Spinner,
|
||
|
|
.Spinner::after {
|
||
|
|
width: $sSpinner-default;
|
||
|
|
height: $sSpinner-default;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Spinner--formIcon,
|
||
|
|
.Spinner--formIcon::after {
|
||
|
|
position: absolute;
|
||
|
|
width: $sSpinner-mini;
|
||
|
|
height: $sSpinner-mini;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Spinner.Spinner--center {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
left: 50%;
|
||
|
|
margin: -($sSpinner-default / 2) 0 0 - ($sSpinner-default / 2);
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes load8 {
|
||
|
|
0% {
|
||
|
|
transform: rotate(0deg);
|
||
|
|
}
|
||
|
|
|
||
|
|
100% {
|
||
|
|
transform: rotate(360deg);
|
||
|
|
}
|
||
|
|
}
|