SCSS
$c1: #5d3191;
$c2: #c12680;
$c3: #ed2861;
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #333;
background: linear-gradient(to left,#000,#414345);
overflow: hidden;
}
.polygon-spinner {
width: .1px;
height: .1px;
border: 100px solid transparent;
border-radius: 0;
animation: loader .9s ease-in infinite,
spin 2.4s linear infinite;
}
.polygon-spinner::before {
display: block;
position: absolute;
z-index: -1;
margin-left: -100px;
margin-top: -100px;
content: '';
height: .1px;
width: .1px;
border: 100px solid transparent;
border-radius: 0;
transform: rotate(45deg);
animation: loader .9s ease-in infinite;
}
@keyframes loader {
0% {
border-bottom-color: transparent;
border-top-color: $c1;
}
25% {
border-left-color: transparent;
border-right-color: $c2;
}
50% {
border-top-color: transparent;
border-bottom-color: $c3;
}
75% {
border-right-color: transparent;
border-left-color: $c2;
}
100% {
border-bottom-color: transparent;
border-top-color: $c1;
}
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
