Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript

Создание стильных и адаптивных индикаторов прогресса с помощью ProgressBar.js

by
Difficulty:BeginnerLength:MediumLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

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

Один из наиболее распространенных способов показать читателям, насколько продвинулся процесс, - использовать прогрессбар. В этом уроке вы узнаете, как использовать библиотеку ProgressBar.js для создания разных индикаторов выполнения (прогрессбаров) с простыми и сложными формами.

Создание простого индикатора выполнения (прогрессбара)

После включения библиотеки в проект создать индикатор выполнения с помощью этой библиотеки очень просто. ProgressBar.js поддерживается во всех основных браузерах, включая IE9+, что означает, что вы можете уверенно использовать его на любом веб-сайте, который вы создаете. Вы можете получить последнюю версию библиотеки из GitHub или напрямую использовать ссылку CDN, чтобы добавить ее в свой проект.

Чтобы избежать непредвиденного поведения, убедитесь, что контейнер индикатора выполнения имеет то же соотношение сторон, что и индикатор выполнения. В случае круга пропорция контейнера должна быть 1:1, потому что ширина будет равна высоте. В случае полукруга соотношение сторон контейнера должно быть 2:1, потому что ширина будет вдвое больше высоты. Аналогично, в случае простой линии контейнер должен иметь соотношение сторон 100:strokeWidth для линии.

При создании индикаторов выполнения в виде линии, круга или полукруга вы можете просто использовать метод ProgressBar.Shape() для создания прогрессбара. В этом случае Shape может быть Circle, Line или SemiCircle. Вы можете передать два параметра методу Shape(). Первый параметр - это селектор или узел DOM для идентификации контейнера индикатора выполнения. Второй параметр - это объект с парами ключ-значение, которые определяют внешний вид индикатора выполнения.

Вы можете указать цвет индикатора выполнения, используя свойство color. Любой индикатор выполнения, который вы создадите, по умолчанию будет иметь темно-серый цвет. Толщина полосы выполнения может быть задана с использованием свойства strokeWidth. Вы должны иметь в виду, что ширина здесь не в пикселях, а в процентах от размера холста. Например, если холст шириной 200 пикселей, значение strokeWidth равное 5 будет создавать линию толщиной 10 пикселей.

Помимо основного индикатора выполнения, библиотека также позволяет рисовать трейлинг-линию, которая покажет читателям путь, по которому перемещается индикатор выполнения. Цвет трейлинг-линии может быть задан с использованием свойства trailColor, а ее ширина может быть указана с использованием свойства trailWidth. Подобно strokeWidth, свойство trailWidth также вычисляет ширину в процентах.

Общее время, затрачиваемое индикатором выполнения, чтобы перейти от исходного состояния к его окончательному состоянию, может быть задано с использованием свойства duration. По умолчанию индикатор выполнения завершит анимацию за 800 миллисекунд.

Свойство easing можно использовать для указания того, как индикатор выполнения должен перемещаться во время анимации. По умолчанию все полоски хода будут двигаться с linear скоростью. Чтобы сделать анимацию более привлекательной, вы можете установить это значение на что-то еще, например, easyIn, easeOut, easeInOut или bounce.

После указания начальных значений параметров вы можете анимировать полосы выполнения, используя метод animate(). Этот параметр принимает три параметра. Первый параметр - это значение, до которого вы хотите анимировать линию выполнения. Два других параметра являются необязательными. Второй параметр можно использовать для переопределения любых значений свойств анимации, которые вы установили во время инициализации. Третий параметр - это функция обратного вызова, чтобы сделать что-то еще после окончания анимации.

В следующем примере я создал три разных индикатора выполнения, используя все свойства, которые мы обсуждали до сих пор.

Анимация текстовых значений с помощью индикатора выполнения

Единственное, что меняется с анимацией индикаторов выполнения в приведенном выше примере, это их длина. Однако, ProgressBar.js также позволяет изменять другие физические атрибуты, такие как ширина и цвет линии прогресса. В таких случаях вам нужно будет указать начальные значения для индикатора выполнения внутри параметра from и конечные значения внутри параметра to при инициализации индикаторов выполнения.

Вы также можете сообщить библиотеке о создании сопроводительного текстового элемента с индикатором выполнения, чтобы отобразить некоторую текстовую информацию для ваших пользователей. Текст может быть от статического значения до числового значения, указывающего ход анимации. Параметр text примет объект как его значение.

Этот объект может иметь параметр value, чтобы указать начальный текст, который будет отображаться внутри элемента. Вы также можете указать имя класса, которое будет добавлено в текстовый элемент, используя параметр className. Если вы хотите применить некоторые встроенные стили к текстовому элементу, вы можете указать их все как значение параметра style. Все стили по умолчанию можно удалить, установив значение style равным null. Важно помнить, что значения по умолчанию применяются только в том случае, если вы не установили пользовательское значение для любого свойства CSS внутри style.

Значение внутри текстового элемента останется неизменным во время всей анимации, если вы не обновите его самостоятельно. К счастью, ProgressBar.js также предоставляет параметр step, который можно использовать для определения функции, которую нужно вызывать с каждым шагом анимации. Поскольку эта функция будет вызываться несколько раз в секунду, вам нужно быть осторожным с ее использованием и использовать в ней простые вычисления.

Создание индикаторов выполнения с пользовательскими фигурами

Иногда вам может понадобиться создавать индикаторы выполнения с различными фигурами, которые соответствуют общей теме вашего сайта. ProgressBar.js позволяет создавать индикаторы выполнения с настраиваемыми фигурами с помощью метода Path(). Этот метод работает как Shape(), но предоставляет меньше параметров для настройки анимации индикатора выполнения. Вы по-прежнему можете задавать значения анимации duration и easing. Если вы хотите анимировать цвет и ширину линии прогресса, используемой для рисования пользовательской фигуры, вы можете сделать это внутри параметров from и to.

Библиотека не предоставляет никакого способа рисовать трейл для пользовательской фигуры, как это было сделано для простых линий и кругов. Однако вы можете легко создать трейл самостоятельно. В следующем примере я создал треугольный индикатор выполнения, используя метод Path().

Прежде чем писать код JavaScript, нам нужно будет определить наш собственный SVG-путь в HTML. Вот код, который я использовал для создания простого треугольника:

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

Заключительные мысли

Как вы видели в этом уроке, ProgressBar.js позволяет легко создавать различные виды прогресс-баров. Он также дает вам возможность анимировать различные атрибуты индикатора выполнения, такие как его ширина и цвет.

И не только это, вы также можете использовать эту библиотеку, чтобы изменить значение сопутствующего текстового элемента, чтобы показать прогресс в текстовой форме. Это руководство охватывает все, что вам нужно знать, чтобы создавать простые индикаторы. Однако, вы можете просмотреть документацию, чтобы узнать больше о библиотеке.

Если есть что-то, что вы хотели бы, чтобы я разъяснил в этом уроке, не стесняйтесь, дайте мне знать в комментариях.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.