Как нарисовать прядильщик с чистым CSS? ⇐ Html

[Anonymous]

Я впервые попытался реализовать его через два треугольника. И получил удовлетворительный выход < /p>

Код: Выделить всё

#wrapper {
margin-left: 40vw;
margin-top: 20vh;
}

#fidgetu {
width: 0;
height: 0;
position: absolute;
margin-top: 3vh;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
animation: rotate 2s linear infinite;
}

#fidgetd {
width: 0;
height: 0;
position: absolute;
margin-top: 3vh;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
animation: rotate 2s linear infinite;
}

@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}< /code>



< /code>
< /div>
< /div>
< /p>

Я полагаю, что рисование скрипта -спиннера потребует 4 div  круги и 3 div 

прямоугольники для подключения центрального круга к остальным трем и обертке Div (применение имущество о рождении к этому Div). Но позиционирование испортится.>

Подробнее здесь: https://stackoverflow.com/questions/452 ... h-pure-css