125 lines
1.8 KiB
SCSS
125 lines
1.8 KiB
SCSS
$theme-colours: ();
|
|
$theme-colours: map-merge((
|
|
"yellow" : #f9a541,
|
|
"red" : #f44321,
|
|
"blue" : #5091cd,
|
|
"green" : #7ac143,
|
|
), $theme-colours);
|
|
|
|
:host {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10000;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
opacity: .8;
|
|
}
|
|
|
|
.box {
|
|
position: relative;
|
|
width: 345px;
|
|
height: 345px;
|
|
margin: 0 auto;
|
|
|
|
p {
|
|
float: right;
|
|
margin: 95px 0 0;
|
|
font: normal 1.25em/1em sans-serif;
|
|
color: #999;
|
|
}
|
|
|
|
> span {
|
|
animation: jspinner 2s infinite ease-in-out;
|
|
}
|
|
|
|
.red {
|
|
animation-delay: -1.5s;
|
|
}
|
|
.blue {
|
|
animation-delay: -1s;
|
|
}
|
|
.green {
|
|
animation-delay: -.5s;
|
|
}
|
|
}
|
|
|
|
@each $colour in $theme-colours {
|
|
$key: nth($colour, 1);
|
|
$value: nth($colour, 2);
|
|
|
|
.#{$key} {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 90px;
|
|
height: 90px;
|
|
content: "";
|
|
background: $value;
|
|
border-radius: 90px;
|
|
|
|
&::before,
|
|
&::after {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
box-sizing: content-box;
|
|
width: 50px;
|
|
content: "";
|
|
background: transparent;
|
|
border: 50px solid $value;
|
|
}
|
|
|
|
&::before {
|
|
height: 35px;
|
|
margin: 60px 0 0 -30px;
|
|
border-width: 50px 50px 0;
|
|
border-radius: 75px 75px 0 0;
|
|
}
|
|
|
|
&::after {
|
|
height: 105px;
|
|
margin: 140px 0 0 -30px;
|
|
border-width: 0 0 0 50px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.yellow {
|
|
margin: 0 0 0 255px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
.red {
|
|
margin: 255px 0 0 255px;
|
|
transform: rotate(135deg);
|
|
}
|
|
|
|
.blue {
|
|
margin: 255px 0 0;
|
|
transform: rotate(225deg);
|
|
}
|
|
|
|
.green {
|
|
transform: rotate(315deg);
|
|
}
|
|
|
|
@keyframes jspinner {
|
|
0%, 40%, 100% {
|
|
opacity: .3;
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.box > span {
|
|
animation: none;
|
|
}
|
|
}
|