Как сделать прогресс бар develnext
Добавил пользователь Morpheus Обновлено: 04.10.2024
Разберёмся как создать и настроить линейный индикатор выполнения (прогресс-бар) в виде диаграммы в Excel.
В современную экономическую жизнь прочно вошли понятия КПЭ (ключевые показатели эффективности, или KPI) и дашборда, которые помогают нам увидеть насколько эффективно выполняются те или иные цели. Грамотная визуализация позволяет сделать это приятным и понятным глазу языком.
Мы уже разбирали с вами примеры пулевой диаграммы, диаграммы в виде спидометра, сейчас остановимся ещё на одном варианте визуализации — индикаторе выполнения (также встречаются названия индикатор процесса или прогресс-бар от английского progress bar).
Для начала давайте поймем, что же это именно такое?
Прогресс бар — это графический элемент в виде полоски (горизонтальной, вертикальной, круговой и т.д.), показывающий статус процесса с помощью заполнения полоски по мере выполнения. Вы часто можете видеть горизонтальный вариант графика во время ожидания загрузки файлов или установки программ.
Сегодня предлагаю подробно рассмотреть линейный вариант графика, который представляет собой простую горизонтальную или вертикальную полосу:
Также в целом можно выделить 2 способа построения графика:
- Без делений на шкале; в этом случае полоска нарисована как единый объект.
- С делениями. В этом случае дополнительно рисуется шкала, которая отображает уровни выполнения (к примеру от 0% до 40% — красная зона, от 40% до 70% — желтая зона и т.д.).
Построение линейного индикатора (прогресс бара)
Вариант 1. Прогресс бар без шкалы
Давайте приступим к построению и начнем с самого простого варианта.
Для начала создадим таблицу, состоящую всего из 2 рядов с данными, в первом будет исходный процент (к примеру 85%), а во втором оставшаяся недостающая часть до 100% (т.е. в данном случае 15% = 100% — 85%):
Выделяем диапазон с данными A1:B2 и строим гистограмму с накоплением (в панели вкладок выбираем Вставка -> Диаграммы -> Линейчатая гистограмма с накоплением):
Как видим Excel не совсем правильно интерпретировал данные и построил график с 2 рядами данных, поэтому для корректного отображения поменяем местами строки и столбцы (выделяем диаграмму и в панели вкладок Конструктор выбираем Строка/Столбец), этим мы добьемся отображения всех данных в одному ряду:
Отлично, диаграмма уже начинает приобретать узнаваемый вид.
Далее устанавливаем минимальную и максимальную границы для оси (щелкаем правой кнопкой мыши по горизонтальной оси и попадаем в настройки Формата оси), как 0 и 1 соответственно, чтобы наша полоска полностью помещалась и показывалась на графике:
В результате мы получаем следующий вид графика:
Уберем ненужные на текущий момент детали в виде названия, дополнительных осей и прочего, чтобы они не отвлекали от построения (их, безусловно, можно не удалять и компоновать на ваше усмотрение):
Как мы видим, полученная полоска занимает не всю ширину диаграммы, снизу и сверху мы видим пустые белые полосы.
Поэтому, чтобы растянуть диаграмму на всю возможную ширину и убрать лишние полосы, установим боковой зазор для ряда равным нулю (выделяем любой ряд с данными, щелкаем правой кнопкой мыши и выбираем Формат ряда данных -> Параметры ряда):
В итоге получаем более компактный вид:
Остались небольшие детали, покрасим части полоски в подходящие цвета и добавим подпись данных на ряд:
Все готово, перейдем к следующему варианту.
Вариант 2. Прогресс бар со шкалой
Отличие этого варианта от предыдущего заключается лишь в дополнительной подложке под полоску, которая показывает уровни выполнения показателя, остальные части практически повторяют предыдущий вариант построения.
Для начала несколько модифицируем нашу таблицу и добавим на нее дополнительные ряды для построения шкалы:
В данном случае я указал шаг шкалы равным 10%, но можно поставить абсолютно любой по вашему усмотрению, главное чтобы сумма всех таких шагов давала 100% (10 шагов по 10% как в примере, или 20 шагов по 5% и т.д.).
Выделяем диапазон с данными A1:B11 и, как и в предыдущем примере, строим линейчатую гистограмму с накоплением:
Повторяем алгоритм и меняем строки и столбцы местами, чтобы диаграмма приобрела необходимый нам вид:
Как мы видим, у нас появилась достаточно длинная полоса, где в начале находится полоска, а в конце как раз разместилась шкала в виде маленьких разноцветных прямоугольников.
Покрасим каждый шаг шкалы в подходящий цвет, для этого левой кнопкой мыши выделяем каждый ряд по отдельности и делаем заливку соответствующим цветом (к примеру, первые 4 шага красим красным, 3 средние — желтым и 3 последние — зеленым):
Так как шкала должна быть подложкой (т.е. находиться позади основного ряда), то поместим основной ряд на второстепенную ось, чтобы он всегда находился над шкалой. Для этого в настройке формата ряда данных указываем построить ряд по вспомогательной оси (именно для ряда с основной полоской):
В результате настройки типов осей получаем:
Далее также для обеих осей указываем 0 и 1 как минимальную и максимальную границы, чтобы график был ровно от 0% до 100%:
Убираем название, оси данных и прочие ненужные в данный момент детали, настраиваем нулевой боковой зазор:
Так как шкала на полученной диаграмме не видна за основной полоской, то для основного ряда с данными установим прозрачность (щелкаем по ряду правой кнопкой мыши, в контекстном меню выбираем Формат ряда данных -> Заливка и границы -> Заливка):
Также добавим подпись данных и получаем:
По усмотрению шкалу можно сделать не сплошной, а с разделителями, для этого установим для каждого ряда шкалы белую границу:
Спасибо за внимание!
Если у вас есть вопросы по теме статьи — пишите в комментариях.
Полоса загрузки, состояние загрузки или как его называют — прогресс бар или статус бар. Он может применяться при опросах, при построении графиков, при тех же опросах. В качестве индикатора загрузки страницы, а также в качестве завершенности какой-нибудь операции в процентах. В HTML5 есть специальный тег, который облегчает работу с прогресс баром. А также с помощью CSS3 не составит сложности его оформить по собственному желанию. И в нашем случае нет необходимости использовать изображения, что, несомненно, является большим плюсом.
Реальный пример прогресс бара можно увидеть здесь:
HTML5 часть — Создание и оформление прогресс бара
В HTML5 присутствует тег
, который значительно облегчает нам работу с прогресс баром. Он имеет атрибут min, max и value. Чтобы он появился на странице, необходимо написать следующее:
Когда вы вставите вышеприведенный код в HTML, то увидите прогресс бар, который отображается по умолчанию и с базовыми стилями. Если вы пользовались различными операционными система, то могли заметить, что прогресс бары в них отличаются.
CSS3 часть
А сейчас присвоим собственные стили нашему прогресс бару. В качестве селектора в CSS файле мы будем использовать сам тег progress:
Вот, к примеру, вышеприведенный код убирает границу у прогресс бара и фон делает серым.
Для разных браузеров разные селекторы
Дело в том, что чтобы правильно отображался прогресс бар в разных браузерах, необходимо использовать псевдо-селекторы, предназначенные специально для конкретного браузера.
Для Safari и Chrome:
Для Firefox:
А все вместе они выглядят следующим образом:
Анимация прогресс бара
HTML часть
Следующим шагом будет создание анимации прогресс бара. Итак, прогресс бар заполняется слева направо. То есть начинается когда value="0" и заканчивается когда value="максимум". В качестве примера возьмем следующий код:
jQuery часть
Для анимации прогресс бара будем использовать библиотеку jQuery, поэтому ее необходимо сначала подключить:
Далее пишем скрипт о том, что наш прогресс бар будет заполняться. В первой строке мы определяем тот элемент, который будет заполняться(это и есть прогресс бар), во второй получаем максимум прогресс бара из атрибута max:
Далее создаем переменную, которая будет хранить значение функции анимации:
Внутри данной функции мы будем увеличивать заполнение прогресс бара на одну единицу:
А затем присваивать атрибуту value увеличенное значение:
Также мы будем показывать процент загрузки рядом с прогресс баром:
Затем нам нужна функция, которая запустит функцию анимации загрузки:
На данный момент анимация загрузки работает, но значения будут увеличиваться до бесконечности. Поэтому необходимо создать условия, при котором анимация остановиться, когда прогресс бар полностью заполнится, то есть достигнет максимума.
Будем хранить результат функции в переменной
А внутри функции loading напишем условие:
Ниже представлен весь код:
Вывод
Данный элемент, если он красиво оформлен, также позволяет выделить ваш сайт. Я уже писал выше где он применяется, но, возможно, вы найдете ему новое предназначение 🙂 .
, который позволяет показывать прогресс определенных задач, таких как добавление чего-либо или индикация загрузки, вобщем всего, что находится в процессе. В этой статье мы увидим, как добавить этот элемент в документ, как оформить его при помощи CSS и анимируем полосу индикатора выполнения. Как вы увидите далее, в этом нет ничего сложного, и все можно будет сделать несколькими правилами в стилях css.
Основы использования
Прогресс бар может быть добавлен тегом
. Значение индикатора определяется на основе минимального и максимального атрибутов, следующим образом:
Поскольку речь идет о нативном прогресс баре, вид будет меняться в зависимости от платформы. Ниже видно как стандартный индикатор выглядит в Windows и OSX.
Теперь, давайте попробуем оформить этот индикатор, чтобы он имел одинаковый или аналогичный вид на всех платформах.
Оформление прогресс бара
В таблице стилей, мы можем обращаться к селектору
для добавления нужных нам стилей. В наших примерах мы изменим цвет фона, удалим границу, и сделаем углы плавными.
Мы увидим, что каждый браузер обрабатывает стили по-своему.
В Chrome и Safari, будут удалены наши стили и заменены на Webkit стили, (по крайней мере, на данный момент).
Итак, нам нужны обходные пути.
В Chrome и Safari, обращение к элементу
Таким образом, мы должны добавить эти Webkit псевдо-классы.
Firefox также имеет свой специальный псевдо-класс
В отличие от Chrome и Safari, этот псевдо-класс в Firefox относится к значению (ползунку).
И так, вот все наши стили для стилизации
Примеры
Собственно, нет ничего сложного чтобы стилизовать этот элемент. Еще раз подведем итог, что бы стало все понятно. Сначала пишем правило для progress, это правило будет у нас являться также правилом для фона элемента в браузерах mozilla. Потом пишем отдельно правила для фона и ползунка для браузеров Chrome, и в заключении для ползунка в mozilla.
Вот первый пример:
HTML
Элемент div тут просто для выравнивания и небольшой красоты.
CSS
Еще один пример с фэйковой демонстрацией работы:
HTML
CSS
jQuery
Для анимации создадим простенький скрипт.
Кому интересна реализация скрипта:
Идея состоит в том, индикатор будет расширяться от 0 и остановится как только он достигнет максимального значения. Также будем отображать числовое значение.
Сохраняем элемент индикатора, значение индикатора прогресса, максимальное значение, а также время в переменные.
Затем мы создаем переменную, которая повторит функции анимации. В этом примере мы называем переменную loading.
Внутри функции выше, мы устанавливаем прогресс интервала. Будем увеличивать значение на 1.
И потом, добавим результат на прогресс бар.
Мы также показываем, значение рядом с индикатором:
Далее, мы создаем новую функцию для запуска функции анимации.
В этот момент, анимация уже функционирует. Однако значение будет расти бесконечно. Итак, нам нужно создать условный оператор для анимации, чтобы остановить ее, когда она достигает своего максимального значения. Внутри переменной loading, мы добавим условный оператор:
При пуске программы SplashForm долго висит порядка 50 секунд (в зависимости от количества записей в базе данных). Как мне реализовать ProgressBar, чтобы он отображал создание форм.
А что для вас создание формы? Сама функция создания окна выполняется мгновенно.
Если у вас грузится база и вы хотите это отобразить, то используйте какой-нибудь счётчик в функции загрузки.
Для этого вам необходимо знать, либо приблизительное время загрузки, либо макс. кол-во элементов базы или ещё что-то, на что можно ориентироваться.
Далее просто увеличиваете текущее значение ПрогрессБара, либо каждую секунду, либо при загрузки каждого элемента базы, либо ещё при каком-то событии.
Что не понятно?
| Если я буду определять максимальное число базы, то программа еще медленее будет грузиться |
Поясните.
Тут не понятно то, как вы определяете размер базы. Ведь в БД фиксированный размер записи, а размер файла известен заранее. Просто делим общий размер на размер записи и получаем кол-во записей.
Это еще куда ни шло при загрузке сотен тысяч записей из базы. У вас столько? Если существенно меньше, то сверх не оптимальный код. А прогрессбар по другому и не работает - счетчик прогресса и максимальное значение счетчика. Как их определять знает только программист в конкретной ситуации
Если бы архитекторы строили здания так, как программисты пишут программы, то первый залетевший дятел разрушил бы цивилизацию
Читайте также: