cartodb/assets/stylesheets/common/spinner.scss
2020-06-15 10:58:47 +08:00

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);
}
}