website-gemompel/themes/MetroMumbleLight/loading.scss

38 lines
649 B
SCSS

$bg-color: #eee !default
$spinner-color: #999 !default
$spinner-bg-color: #ddd !default
.loading-container {
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: $bg-color;
z-index: 1000;
}
.loading-circle {
box-sizing: border-box;
width: 80px;
height: 80px;
position: absolute;
top: calc(50% - 40px);
left: calc(50% - 40px);
border-radius: 100%;
border: 10px solid $spinner-bg-color;
border-top-color: $spinner-color;
animation: spin 1s infinite linear;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.loaded {
top: -100%;
transition: top 1s;
transition-delay: 2s;
}