Ничто в сети не происходит мгновенно. Разница лишь во времени, необходимом для завершения процесса. Некоторые процессы могут происходить за несколько миллисекунд, а другие могут занимать до нескольких секунд или минут. Например, вы можете редактировать очень большое изображение, загруженное вашими пользователями, и этот процесс может занять некоторое время. В таких случаях хорошей идеей будет дать посетителям понять, что веб-сайт не застрял где-то, но на самом деле он работает над вашим изображением и добивается определенного прогресса.
Один из самых распространенных способов показать читателям, насколько продвинулся процесс, — это использовать индикаторы выполнения. В этом руководстве вы узнаете, как использовать библиотеку ProgressBar.js для создания различных индикаторов выполнения с простыми и сложными фигурами.
Создание базового индикатора выполнения
После того, как вы включили библиотеку в свой проект, создать индикатор выполнения с помощью этой библиотеки легко. ProgressBar.js поддерживается во всех основных браузерах, включая IE9 +, что означает, что вы можете использовать его на любом веб-сайте, который вы создаете с уверенностью. Вы можете получить последнюю версию библиотеки из GitHub или напрямую использовать ссылку CDN, чтобы добавить ее в свой проект.
Чтобы избежать неожиданного поведения, убедитесь, что контейнер индикатора выполнения имеет такое же соотношение сторон, что и индикатор выполнения. В случае круга соотношение сторон контейнера должно быть 1: 1, потому что ширина будет равна высоте. В случае полукруга, соотношение сторон контейнера должно быть 2: 1, потому что ширина будет вдвое больше высоты. Точно так же в случае простой линии контейнер должен иметь соотношение сторон 100: strokeWidth для линии.
При создании индикаторов выполнения с помощью линии, круга или полукруга, вы можете просто использовать метод ProgressBar.Shape() для создания индикатора выполнения. В этом случае Shape может быть Circle , Line или SemiCircle . Вы можете передать два параметра в метод Shape() . Первый параметр — это селектор или узел DOM, который идентифицирует контейнер индикатора выполнения. Второй параметр — это объект с парами ключ-значение, которые определяют внешний вид индикатора выполнения.
Вы можете указать цвет индикатора выполнения, используя свойство color . Любой созданный вами индикатор выполнения будет иметь темно-серый цвет по умолчанию. Толщина индикатора выполнения может быть указана с strokeWidth свойства strokeWidth . Вы должны иметь в виду, что ширина здесь не в пикселях, а в процентах от размера холста. Например, если холст имеет ширину 200px, значение strokeWidth равное 5, создаст линию толщиной 10px.
Помимо основного индикатора выполнения, библиотека также позволяет нарисовать конечную линию, которая покажет читателям путь, по которому будет перемещаться индикатор выполнения. Цвет линии следа можно указать с trailColor свойства trailColor , а ее ширину — с trailWidth свойства trailWidth . Так же, как strokeWidth , свойство trailWidth также вычисляет ширину в процентах.
Общее время, необходимое индикатору выполнения для перехода из исходного состояния в конечное состояние, можно указать с помощью свойства duration . По умолчанию индикатор выполнения завершает анимацию за 800 миллисекунд.
Вы можете использовать свойство easing чтобы указать, как индикатор выполнения должен двигаться во время анимации. Все индикаторы хода по умолчанию будут двигаться с linear скоростью. Чтобы сделать анимацию более привлекательной, вы можете установить для этого значения что-то еще, например easeIn , easeOut , easeInOut или bounce .
После указания начальных значений параметров вы можете анимировать индикаторы выполнения с помощью метода animate() . Этот параметр принимает три параметра. Первый параметр — это сумма, до которой вы хотите анимировать строку прогресса. Два других параметра являются необязательными. Второй параметр можно использовать для переопределения любых значений свойств анимации, которые вы задали во время инициализации. Третий параметр — это функция обратного вызова, которая делает что-то еще после завершения анимации.
В следующем примере я создал три разных индикатора выполнения, используя все свойства, которые мы обсуждали до сих пор.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
var lineBar = new ProgressBar.Line(‘#line-container’, {
color: ‘orange’,
strokeWidth: 2,
trailWidth: 0.5
});
lineBar.animate(1, {
duration: 1000
});
var circleBar = new ProgressBar.Circle(‘#circle-container’, {
color: ‘white’,
strokeWidth: 2,
trailWidth: 10,
trailColor: ‘black’,
easing: ‘easeInOut’
});
circleBar.animate(0.75, {
duration: 1500
});
var semiBar = new ProgressBar.SemiCircle(‘#semi-container’, {
color: ‘violet’,
strokeWidth: 2,
trailWidth: 0.5,
easing: ‘bounce’
});
semiBar.animate(1, {
duration: 3000
});
|
Анимация текстовых значений с помощью индикатора выполнения
Единственное, что меняется с анимацией индикаторов выполнения в приведенном выше примере, это их длина. Однако ProgressBar.js также позволяет вам изменять другие физические атрибуты, такие как ширина и цвет штриховой линии. В таких случаях при инициализации индикаторов выполнения вам нужно будет указать начальные значения индикатора выполнения внутри параметра from и конечные значения параметра to .
Вы также можете указать библиотеке создать сопроводительный текстовый элемент с индикатором выполнения, чтобы показать некоторую текстовую информацию вашим пользователям. Текст может быть любым, от статического значения до числового значения, показывающего ход анимации. Параметр text примет объект в качестве значения.
Этот объект может иметь параметр value для указания исходного текста, который будет отображаться внутри элемента. Вы также можете className имя класса для добавления к текстовому элементу с className параметра className . Если вы хотите применить некоторые встроенные стили к текстовому элементу, вы можете указать их все как значение параметра style . Все стили по умолчанию можно удалить, установив значение style в null . Важно помнить, что значения по умолчанию применяются, только если вы не установили пользовательское значение для какого-либо свойства CSS внутри style .
Значение внутри текстового элемента будет оставаться неизменным в течение всей анимации, если вы не обновите его самостоятельно. К счастью, ProgressBar.js также предоставляет параметр step который можно использовать для определения функции, вызываемой при каждом шаге анимации. Так как эта функция будет вызываться несколько раз каждую секунду, вам нужно быть осторожным с ее использованием и делать вычисления внутри нее простыми.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
|
var lineBar = new ProgressBar.Line(«#line-container», {
strokeWidth: 4,
trailWidth: 0.5,
from: { color: «#FF9900» },
to: { color: «#00FF99» },
text: {
value: ‘0’,
className: ‘progress-text’,
style: {
color: ‘black’,
position: ‘absolute’,
top: ‘-30px’,
padding: 0,
margin: 0,
transform: null
}
},
step: (state, shape) => {
shape.path.setAttribute(«stroke», state.color);
shape.setText(Math.round(shape.value() * 100) + ‘ %’);
}
});
lineBar.animate(1, {
duration: 4000
});
var circleBar = new ProgressBar.Circle(«#circle-container», {
color: «white»,
strokeWidth: 2,
trailWidth: 25,
trailColor: «black»,
easing: «easeInOut»,
from: { color: «#FF9900», width: 1 },
to: { color: «#FF0099», width: 25 },
text: {
value: ‘0’,
className: ‘progress-text’,
style: {
color: ‘black’,
position: ‘absolute’,
top: ‘45%’,
left: ‘42%’,
padding: 0,
margin: 0,
transform: null
}
},
step: (state, shape) => {
shape.path.setAttribute(«stroke», state.color);
shape.path.setAttribute(«stroke-width», state.width);
shape.setText(Math.round(shape.value() * 100) + ‘ %’);
}
});
circleBar.animate(0.75, {
duration: 1500
});
var semiBar = new ProgressBar.SemiCircle(«#semi-container», {
color: «violet»,
strokeWidth: 2,
trailWidth: 8,
trailColor: «black»,
easing: «bounce»,
from: { color: «#FF0099», width: 1 },
to: { color: «#FF9900», width: 2 },
text: {
value: ‘0’,
className: ‘progress-text’,
style: {
color: ‘black’,
position: ‘absolute’,
top: ‘45%’,
left: ‘50%’,
padding: 0,
margin: 0,
transform: null
}
},
step: (state, shape) => {
shape.path.setAttribute(«stroke», state.color);
shape.path.setAttribute(«stroke-width», state.width);
shape.setText(Math.round(shape.value() * 100) + ‘ %’);
}
});
semiBar.animate(0.75, {
duration: 2000
});
|
Создание индикаторов выполнения с пользовательскими фигурами
Иногда вам может потребоваться создать индикаторы выполнения с различными формами, которые соответствуют общей теме вашего сайта. ProgressBar.js позволяет создавать индикаторы выполнения с пользовательскими фигурами, используя метод Path() . Этот метод работает как Shape() но предоставляет меньше параметров для настройки анимации индикатора выполнения. Вы по-прежнему можете указать duration и значение easing для анимации. Если вы хотите анимировать цвет и ширину обводки, используемой для рисования пользовательского контура, вы можете сделать это внутри параметров from и to .
Библиотека не предоставляет никакого способа рисовать след для пользовательского пути, как это было для простых линий и окружностей. Тем не менее, вы можете легко создать след самостоятельно. В следующем примере я создал треугольный индикатор выполнения с помощью метода Path() .
Перед написанием кода JavaScript нам нужно определить наш собственный путь SVG в HTML. Вот код, который я использовал для создания простого треугольника:
|
1
2
3
4
|
<svg xmlns=»http://www.w3.org/2000/svg» version=»1.1″ x=»0″ y=»0″ width=»300″ height=»300″ viewBox=»0 0 300 300″>
<path d=»M 50 50 L 200 100 L 200 300 z» fill=»none» stroke=»#ddd» stroke-width=»1″/>
<path id=»triangle» d=»M 50 50 L 200 100 L 200 300 z» fill=»none» stroke=»blue» stroke-width=»5″/>
</svg>
|
Вы могли заметить, что я создал два разных элемента пути. Первый путь имеет светло-серый цвет, который действует как след, который мы видели с помощью простых индикаторов в предыдущем разделе. Второй путь — это тот, который мы анимируем с помощью нашего кода. Мы дали ему id который используется для его идентификации в коде JavaScript ниже.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
|
var path = new ProgressBar.Path(«#triangle», {
duration: 6000,
from: {
color: «#ff0000»,
width: 2
},
to: {
color: «#0099ff»,
width: 10
},
strokeWidth: 4,
easing: «easeInOut»,
step: (state, shape) => {
shape.path.setAttribute(«stroke», state.color);
shape.path.setAttribute(«stroke-width», state.width);
}
});
path.animate(1);
|
Последние мысли
Как вы видели в этом руководстве, ProgressBar.js позволяет легко создавать различные типы индикаторов выполнения. Это также дает вам возможность анимировать различные атрибуты индикатора выполнения, такие как его ширина и цвет.
Кроме того, вы также можете использовать эту библиотеку, чтобы изменить значение сопровождающего текстового элемента, чтобы показать прогресс в текстовой форме. Этот урок охватывает все, что вам нужно знать, чтобы создавать простые индикаторы выполнения. Тем не менее, вы можете просмотреть документацию, чтобы узнать больше о библиотеке.
Если есть что-то, что вы хотели бы, чтобы я разъяснил в этом уроке, не стесняйтесь, дайте мне знать в комментариях.