Я пытаюсь создать анимацию Apple's OS X загрузчика.
То, что я уже попробовал:
.animation-wrapper {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
position: relative;
overflow: hidden;
filter: brightness(0.8);
-webkit-filter: brightness(0.8);
}
.pie-piece1 {
position: absolute;
width: 50%;
height: 50%;
bottom: 0;
left: 0;
background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 100%);
}
.pie-piece2 {
position: absolute;
width: 50%;
height: 50%;
bottom: 0;
right: 0;
background: linear-gradient(to right, rgba(255, 255, 0, 1) 0%, rgba(0, 255, 0, 1) 100%);
}
.pie-piece3 {
position: absolute;
width: 50%;
height: 50%;
top: 0;
left: 0;
background: linear-gradient(to right, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 255, 1) 100%);
}
.pie-piece4 {
position: absolute;
width: 50%;
height: 50%;
top: 0;
right: 0;
background: linear-gradient(to right, rgba(255, 0, 255, 1) 0%, rgba(0, 0, 255, 1) 100%);
}
.rotating-spinners {
position: absolute;
}
.spike {
fill: rgba(22, 22, 22, 0.5);
}
Линейные градиенты неправильно направлены. Я не смог найти способ сделать градиент, идущий в двух направлениях.
Есть ли способ, чтобы создать это, используя только CSS или SVG, не смешивая их, как это сделал я?
Или есть другие решения, может использовать canvas, или какую-то другую магию?
Перевод вопроса: Circle loading animation @Persijn
Ответ
ответ: Paul LeBeau
Вот моя SVG-только версия. Цвет фона колеса не идеален, но я думаю, что получилось довольно близко.
Комментариев нет:
Отправить комментарий