Как сделать прогресс бар с процентами
Обновлено: 05.07.2024
Ничто в интернете не происходит мгновенно. Единственное различие заключается во времени, которое требуется для завершения процесса. Некоторые процессы могут произойти за несколько миллисекунд, в то время как другие могут занимать до нескольких секунд или минут. Например, вы можете редактировать очень большое изображение, загруженное вашими пользователями, и этот процесс может занять некоторое время. В таких случаях полезно сообщить посетителям, что сайт не застрял где-то, а он на самом деле работает над вашим изображением и делает определенный прогресс.
Один из наиболее распространенных способов показать читателям, насколько продвинулся процесс, - использовать прогрессбар. В этом уроке вы узнаете, как использовать библиотеку 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 позволяет легко создавать различные виды прогресс-баров. Он также дает вам возможность анимировать различные атрибуты индикатора выполнения, такие как его ширина и цвет.
И не только это, вы также можете использовать эту библиотеку, чтобы изменить значение сопутствующего текстового элемента, чтобы показать прогресс в текстовой форме. Это руководство охватывает все, что вам нужно знать, чтобы создавать простые индикаторы. Однако, вы можете просмотреть документацию, чтобы узнать больше о библиотеке.
Если есть что-то, что вы хотели бы, чтобы я разъяснил в этом уроке, не стесняйтесь, дайте мне знать в комментариях.
В предыдущей статье, мы коснулись темы загрузки файлов методом $.ajax() и, если обычные данные грузятся и обрабатываются на сервере достаточно быстро, то с файлами этот процесс, может занять значительно больше времени, а тем более, если выполняется мультизагрузка. В первом случае, вполне достаточно вывести для пользователя какой-нибудь анимированный прелоадер, чтоб дать ему понять, что сервер не ушёл на обед, а занимается делом. Во втором же случае, гораздо разумней показать пользователю ход выполнения операции, т.к. веся́щий секунд 5 и больше прелоадер, может утомить юзера или, того хуже, если он подумает, что сервер завис, развернется и уйдет с вашего ресурса. Вот тут-то и пригодится нам "индикатор процесса", он же "прогресс-бар", он же "progress bar" и т.п. ;)
С частью html - всё достаточно просто, хотя и не так безоблачно. Для прогрессбара используют или тег
(реже ), или создают кастомный из любого понравившегося html-элемента. Первые два не очень кроссбраузерны, но предусмотренный в них альтернативный текст, который можно использовать для показа процентов выполнения загрузки, немного исправляет положение. Со вторым вариантом - приходится повозится в CSS, но это не проблема для людей знающих. Мы остановимся на первом, т.к. у нас сейчас основная цель - разобраться с механизмом на JavaScript.
Итак, создадим простую форму для загрузки файла и после поля файла, разместим прогресс-бар, в котором нас интересуют два атрибута: value - текущее значение и max - максимальное значение. Так как мы будем использовать проценты, значения будут колебатся от нуля до ста. Соответственно стартовое значение (value) должно быть "0", а максимальное (max) - "100" :
HTML (файл index.html)
jQuery (файл script.js)
Что касается серверной части, то там работаем с файлом/файлами, как если бы вы их загружали обычным способом.
Готово! Теперь, чтобы протестировать на локальной машине, нужно выбрать файл побольше, иначе загрузка будет происходить практически моментально и работу прогрессбара, вы попросту не заметите. Что будет в обработчике в этом случае - не важно, главное, чтоб он был. И не забудьте перед тестированием, установить значение директивы upload_max_filesize чуть больше, чем загружаемый файл. Для времменого изменения - это проще всего сделать в файле .htaccess, прописав строку:
P.S. На всякий случай, если кому-то понадобится сделать прогресс бар не на UPLOAD, а на DOWNLOAD то нужно внести маленькое изменение, а именно - установить соответствующий обработчик. Ну, естественно, что убрать лишнее. Такое может вам пригодиться, если, например, вы подгружаете на страницу большое изображение.
Пробежавшись по всем четырем статьям, я надеюсь, что у вас уже не возникнет особых сложностей с тем, как работать с методом $.ajax() и вы без труда сможете внедрить его в свои проекты. И наконец, в завершение темы "Ajax", в следующей статейке, разберем реализацию ajax-запросов на чистом (нативном) JavaScript.
Если вы используете на своем сайте какие-либо калькуляторы, которым надо дать время на расчет, или просто сложные скрипты, то вам весьма пригодится такое расширение, как progressbar.
Не будем заморачиваться и изобретать велосипед, а возьмем уже готовое решение отсюда – codesells . Представленный здесь прогресс бар представляет собой небольшой плагин с набором нехитрых настроек.
Плюсами данного плагина являются: наличие callback функции, которая позволяет отследить изменение процента загрузки контента, и очень простая установка.
Во время выполнения кода программ в Excel, в случае длительного исполнения какого-либо процесса, возникает необходимость сообщить пользователю, что приложение стабильно работает, а вовсе не зависло, как это может показаться на первый взгляд.
Во многих случаях, этого вполне достаточно, чтобы успокоить пользователей Ваших программ. Если Вы хотите сообщать больше информации, сообщить оставшееся время обработки, процент выполнения, позволить остановить процедуру, то одним статус баром не обойтись.
В данной статье описано, как создать окно загрузки (или по-другому прогресс бар) для Ваших процедур без загромождения их кодом.
Состав прогресс бара
Строится окно загрузки на основе простой пользовательской формы UserForm, которая содержит следующие элементы:
Если вывести все элементы на форму, то она будет иметь такой вид:
Описание класса и способов создания окна загрузки
Для начала рассмотрим доступные методы данного класса, не концентрируясь на коде, а только на его функциональности:
Это сделано по двум причинам.
Первая причина. При выводе в форму оставшегося времени обработки, его расчет производится, исходя из среднего времени, затраченного на один этап процесса, а затем умноженного на число оставшихся процессов. Данный способ является достаточно простым и понятным, но так как этапы выполняются не всегда с одной и той же скоростью, то время постоянно перепрыгивает с одного показателя на другой, что не позволяет адекватно его оценивать. Особенно данный эффект заметен в начале, когда прошедших этапов для оценки не так много. Установив интервал, Вы можете смягчить данный эффект. Рекомендуемого интервала в данном случае нет, так как все зависит от конкретного процесса.
Второй причиной является производительность. Не смотря на то, что идея вывода информации по загрузке является вполне обоснованной, само ее использование сильно замедляет процесс. Например, с использованием ProgressBar время обработки нижеприведенного примера составляет 1 минута 17 секунд при установленном интервале обновления в секунду. При обновлении формы на каждом этапе, за 2 минуты обработалось чуть больше 2 сотых процента. Без использования на все ушло 8 секунд. Поэтому старайтесь использовать прогресс бар только в случаях, когда это действительно важно и применяйте к нему оптимальный интервал – секунды достаточно, свыше данного значения особых изменений в производительности не наблюдается.
Также предусмотрена возможность остановить выполнение всех процессов, закрыв окно загрузки. Предварительно пользователю будет выведено окно с подтверждением.
Пример подключения прогресс бара к макросу
Далее приводиться простой пример перебора символов строки. Процедура сама по себе смысла не имеет, но хорошо демонстрирует возможности окна загрузки.
Многоуровневая полоса загрузки
Применение описанного в статье класса позволяет создавать независимые друг от друга окна загрузки для многоуровневых процессов.
Никаких дополнительных действий не требуется, достаточно создать новый экземпляр класса (New ProgressBar) и работать с ним независимо от родительского процесса.
Рекомендация: Для дочерних процессов добавляйте к формам загрузок уникальные заголовки (ProgressBar.Start Заголовок). Это уведомит пользователя программы о том, что сейчас выполняется подпроцесс.
Специальный элемент Microsoft ProgressBar Control
Выше было сказано о том, что саму полосу загрузки можно заменить дополнительным элементом управления формы, который специально предназначен для этого и называется Microsoft ProgressBar Control, version 6.0. Чтобы применить его, достаточно нажать правой кнопкой мыши на панели Tollbox и выбрать пункт "Additional Control. ".
Для ее устранения сначала проверьте наличие на Вашем компьютере файла MSCOMTCL.ocx. Это библиотека содержащая общие элементы управления Windows 6.0. Он должен располагаться в папке \Windows\SysWOW64 для 64-разрядных ОС либо \Windows\Sistem32 для 32-разрядных. В случае необходимости скачайте его и разместите в требуемую папку.
После того, как Вы убедились в наличии библиотеки, следует ее зарегистрировать. Запустите командную строку от имени администратора (Пуск -> Все программы -> Стандартные -> Командная строка) и выполните команду regsvr32 MSCOMTCL.ocx.
Комментарии
Подскажите, а зачем сделана проверка были ли созданы элементы формы? Это сильно тормозит процесс создания окна прогресс бара.
P.S. В любом случае, спасибо за готовое решение! )
Насколько сильно тормозится процесс? На моей машине создание 2-х прогресс баров занимает доли секунды.
Если для Вашей задачи это критично, то лучше вообще отказаться от использования полосы загрузки.
К тому же, проверка осуществляется единожды - при добавлении нового элемента на форму.
Мне понравилась Ваша идея. Внес изменения в код. Спасибо.
Еще было бы не плохо добавить двойной прогресс бар для многоуровневых процессов.
ну это так. Имхо.
PS: просто мне очень понравился ваш прогресс бар) простой и лаконичный.
у меня процедура "поиск решения" выполняется через код VBA, вот там и не знаю к чему "прикрутить" barUpdate.
А как прикрутить ваш прогресс бар на выполнение "поиска решения"? Какой параметр прописывать в barUpdate?
Подключить прогресс бар можно только в коде процедуры VBA.
Каким образом Вы хотите совместить надстройку Excel со своей процедурой?
Читайте также: