CSS
html, body {
background: #222;
overflow: hidden;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
position: relative;
left: 10%;
animation: spin 1s linear infinite;
transform-origin: 16% 34%;
height: 174px;
width: 300px;
}
.inner {
width: 0;
height: 0;
border-bottom: 87px solid #e74c3c;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
box-sizing: border-box;
transform-origin: 50% 65%;
animation: inner 1s linear infinite;
}
.triangle {
float: left;
width: 0;
height: 0;
border-bottom: 87px solid #c0392b;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
transform-origin: 50% 0%;
position: relative;
box-sizing: border-box;
}
.triangle:nth-of-type(2) {
top: -87px;
left: -100px;
animation: a 1s linear infinite;
}
.triangle:nth-of-type(3) {
transform: rotate(-180deg);
top: 87px;
left: -100px;
animation: b 1s linear infinite;
}
.triangle:nth-of-type(4) {
transform: rotate(60deg);
top: -87px;
left: -100px;
animation: c 1s linear infinite;
}
@keyframes a {
from {
transform: rotate(-60deg) scale(1);
}
to {
transform: rotate(-60deg) scale(0);
border-bottom-color: #e67e22;
}
}
@keyframes b {
from {
transform: rotate(-180deg) scale(1);
}
to {
transform: rotate(-180deg) scale(0);
border-bottom-color: #e67e22;
}
}
@keyframes c {
from {
transform: rotate(60deg) scale(1);
}
to {
transform: rotate(60deg) scale(0);
border-bottom-color: #e67e22;
}
}
@keyframes inner {
from {
transform: rotate(0deg) scale(1);
}
to {
transform: rotate(60deg) scale(2);
}
}
@keyframes spin {
from {
transform: rotate(-60deg);
}
to {
transform: rotate(60deg);
}
}
