Как сделать эту загрузочную анимацию?

Question

Я получил задачу сделать загрузочную страницу для веб-приложения, основываясь на изображении выше.Анимация - это, в основном, круг, заполняемый с левой стороны на правую, как по часовой стрелке, так и против часовой стрелки, но я понятия не имею, как сделать такую ​​анимацию.= /

Может кто-нибудь подсказать мне, как это сделать?Это может быть использование canvas (я буду использовать библиотеку Raphael.js), CSS (CSS3 Animations) или даже просто изображения (затем анимация с помощью javascript).

Answer 1

Вы можете сделать это с помощью элемента canvas и некоторой кривой кривой Безье, но это может быть так же хорошо, как с изображениями (и, конечно, проще). Большой спрайт PNG-кадров мог бы справиться с этим легко, и это не было бы таким большим изображением. Более того, поскольку верхнее и нижнее зеркала отражают друг друга, вы можете создать изображения только для верха, а затем продублировать элемент и перевернуть его (с помощью CSS-преобразований), чтобы сделать нижнюю половину.