Страницы

Поиск по вопросам

воскресенье, 26 мая 2019 г.

Анимация кругового прелоадера

Я пытаюсь создать анимацию 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-только версия. Цвет фона колеса не идеален, но я думаю, что получилось довольно близко.

Комментариев нет:

Отправить комментарий