SCSS
$base-line-height: 34px;
$spin-duration: 1.25s * 4;
@keyframes spin {
0%,
25.1%,
50.1%,
75.1% {
transform: rotate(0deg) scaleX(0);
border-radius: 0px;
opacity: 0.5;
}
12.5%,
37.5%,
62.5%,
87.5% {
transform: rotate(180deg) scaleX(1);
opacity: 1;
border-radius: 24px;
}
25%,
50%,
75%,
100% {
transform: rotate(359deg) scaleX(0);
border-radius: 0px;
opacity: 0.5;
}
12.5% {
border-top-color: #A8BF12;
}
37.5% {
border-top-color: #1E9B52;
}
62.5% {
border-top-color: #F1991F;
}
87.5% {
border-top-color: #E55635;
}
}
html {
height: 100%;
}
body {
@extend html;
background: #111;
}
.wrapper-spinner {
z-index: 9998;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
height: 34px * 2;
width: 34px * 2;
border-radius: 6px;
background-color: lighten(#333, 5%);
opacity: 0.5;
}
.spinner {
z-index: 9999;
position: absolute;
top: 50%;
left: 50%;
border-radius: $base-line-height;
width: $base-line-height;
height: $base-line-height;
margin: -20px;
border: .25rem solid transparent;
border-top-color: #007F9A;
animation: spin $spin-duration infinite ease;
}
.pie {
position: absolute;
top: 33.3333333%;
left: 50%;
margin: -32px;
height: 32px;
width: 32px;
border: 16px solid #EFEFEF;
transform: rotate(45deg);
animation: pie 1.25s linear infinite;
border-radius: 50%;
}
@keyframes pie {
0%,
100% {
border-top-color: rgba(168, 191, 18, 1);
border-right-color: rgba(209, 209, 209, 0.5);
border-bottom-color: rgba(209, 209, 209, 0.5);
border-left-color: rgba(209, 209, 209, 0.5);
transform: rotate(-45deg);
}
25% {
border-top-color: rgba(209, 209, 209, 0.5);
border-right-color: rgba(30, 155, 82, 1);
border-bottom-color: rgba(209, 209, 209, 0.5);
border-left-color: rgba(209, 209, 209, 0.5);
transform: rotate(-45deg);
}
50% {
border-top-color: rgba(209, 209, 209, 0.5);
border-right-color: rgba(209, 209, 209, 0.5);
border-bottom-color: rgba(241, 153, 31, 1);
border-left-color: rgba(209, 209, 209, 0.5);
transform: rotate(-45deg);
}
75% {
border-top-color: rgba(209, 209, 209, 0.5);
border-right-color: rgba(209, 209, 209, 0.5);
border-bottom-color: rgba(209, 209, 209, 0.5);
border-left-color: rgba(229, 86, 53, 1);
transform: rotate(-45deg);
}
}
.square {
position: absolute;
top: 66.666666%;
left: 50%;
margin: -28px 0;
height: 32px;
width: 32px;
background-color: #EFEFEF;
transform-origin: 0 100%;
animation: square 1.25s ease infinite;
}
.wrapper-square {
height: 32px * 2;
width: 32px * 2;
margin: -28px -32px;
position: absolute;
top: 66.666666%;
left: 50%;
background-color: #EFEFEF;
}
@keyframes square {
0%,
24.9% {
transform: rotate(-90deg);
background-color: #A8BF12;
}
25%,
49.9% {
transform: rotate(0deg);
background-color: #1E9B52;
}
50%,
74.9% {
transform: rotate(90deg);
background-color: #F1991F;
}
75%,
100% {
transform: rotate(180deg);
background-color: #E55635;
}
}
p.loading {
font-family: 'Arial';
font-weight: 700;
color: darken(#efefef, 10%);
text-align: center;
position: absolute;
width: 100px;
overflow-x: hidden;
top: 15%;
left: 50%;
margin-left: - 50px;
animation: loading 1.25s ease infinite;
&::first-letter {
font-size: 1.5em;
}
}
@keyframes loading {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.5em);
}
}
