Круговой прогресс-бар по мотивам аниме Ghost in the shell

Круговой прогресс-бар по мотивам аниме Ghost in the shell

От автора: я очень долго восхищался дизайном интерфейса в аниме Ghost In The Shell, а на этой неделе понял, что могу воссоздать его в SVG. В данной статье я расскажу пошагово, как я создал такой круговой прогресс-бар.

Готовый пример с полным кодом в CodePen демо.

Разметка

Базовая разметка состоит из нескольких тегов circle разного радиуса, центрированных в одной точке. Также в разметке присутствует тег text:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Трансформация и анимация в CSS и SVG находится пока что на разных уровнях, поэтому анимацией колец занимается SMIL. Усложняем разметку, добавив тег animate внутрь каждого circle:

Одни кольца крутятся по часовой стрелке, другие – против. У всех колец разная скорость без заданных повторений (т.е. бесконечно). Обратите внимание, что кольца поделены на 4 части.

Так как кольца у нас не пунктирные, а анимация привязана к центру, то мы пока что не видим самой анимации, даже если добавить стили ниже:

Чтобы кольца соприкасались друг с другом, но не наезжали, нам достаточно воспользоваться свойством stroke-width. Свойство stroke-dashArray задает высоту обводки такой, чтобы ее не было видно. По крайне мере, сначала. Свойство text-anchor помещает текст в центр прогресс-бара, а transition запускает анимацию.

JavaScript

Кольца закрутились. С помощью JavaScript они превращаются в круговые сегменты:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Также нам нужно получить два случайных значения, которые мы возьмем из функции:

Для вычисления длины каждой окружности скрипт использует цикл. Для определения стартового значения stroke-dasharray для каждого круга используется случайное число от 20 до 80, а также длина окружности, которая берется из свойства:

Изначально, в коде использовался цикл for…of, но я узнал, что в Safari данный цикл не проходит по дереву узлов в SVG. Позже я опишу эту проблему. Код ниже формирует все круговые сегменты, а мы видим анимацию.

В тег text по таймеру каждые 500 миллисекунд (полсекунды) записывается значение i. Это же значение используется для увеличения dashArray каждого круга, что медленно заполняет кольца.

Улучшения

Есть несколько способов:

Не все сегменты превращаются в замкнутые кольца по завершению таймера. Первого значения stroke-dashArray хватает на заполнение маленького внутреннего круга, но его не хватает на формирование замкнутого внешнего кольца. Мне нравится мой код, но вы можете изменить скрипт, чтобы в конце все кольца соединялись.

В идеале, весь SVG код должен генерироваться через JS и заменять HTML5 тег progress, придерживаясь техники прогрессивного улучшения интерфейсов.

Также вы можете изменить скорость роста сегментов таким образом, чтобы все кольца соединялись одновременно.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

PSD to HTML

Практика верстки сайта на HTML5 и CSS3 с нуля

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree