SCSS
$orange: #F36E21;
@mixin animation($animation) {
-webkit-animation: $animation;
animation: $animation;
}
body {
text-align: center;
}
.stats-spinner {
align-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 100px;
.spinner-title {
font-size: 32px;
font-weight: 800;
width: 100%;
}
.spinner {
align-items: center;
@include animation(spin 2s linear infinite 1.5s);
color: $orange;
display: flex;
justify-content: center;
.material-icons {
transform: translate(-2%, 1%);
font-size: 72px;
font-weight: 800;
}
}
}
/* Animations */
@-webkit-keyframes spin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
@keyframes spin {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
