Как сделать индикатор прогресса
Линейный индикатор выполнения (прогресс бар) в Excel
Разберёмся как создать и настроить линейный индикатор выполнения (прогресс-бар) в виде диаграммы в Excel.
Приветствую всех, уважаемые читатели блога TutorExcel.Ru!
В современную экономическую жизнь прочно вошли понятия КПЭ (ключевые показатели эффективности, или KPI) и дашборда, которые помогают нам увидеть насколько эффективно выполняются те или иные цели. Грамотная визуализация позволяет сделать это приятным и понятным глазу языком.
Мы уже разбирали с вами примеры пулевой диаграммы, диаграммы в виде спидометра, сейчас остановимся ещё на одном варианте визуализации — индикаторе выполнения (также встречаются названия индикатор процесса или прогресс-бар от английского progress bar).
Для начала давайте поймем, что же это именно такое?
Прогресс бар — это графический элемент в виде полоски (горизонтальной, вертикальной, круговой и т.д.), показывающий статус процесса с помощью заполнения полоски по мере выполнения. Вы часто можете видеть горизонтальный вариант графика во время ожидания загрузки файлов или установки программ.
Сегодня предлагаю подробно рассмотреть линейный вариант графика, который представляет собой простую горизонтальную или вертикальную полосу:
Также в целом можно выделить 2 способа построения графика:
Построение линейного индикатора (прогресс бара)
Вариант 1. Прогресс бар без шкалы
Давайте приступим к построению и начнем с самого простого варианта.
Для начала создадим таблицу, состоящую всего из 2 рядов с данными, в первом будет исходный процент (к примеру 85%), а во втором оставшаяся недостающая часть до 100% (т.е. в данном случае 15% = 100% — 85%):
Как видим Excel не совсем правильно интерпретировал данные и построил график с 2 рядами данных, поэтому для корректного отображения поменяем местами строки и столбцы (выделяем диаграмму и в панели вкладок Конструктор выбираем Строка/Столбец), этим мы добьемся отображения всех данных в одному ряду:
Отлично, диаграмма уже начинает приобретать узнаваемый вид.
Далее устанавливаем минимальную и максимальную границы для оси (щелкаем правой кнопкой мыши по горизонтальной оси и попадаем в настройки Формата оси), как 0 и 1 соответственно, чтобы наша полоска полностью помещалась и показывалась на графике:
В результате мы получаем следующий вид графика:
Уберем ненужные на текущий момент детали в виде названия, дополнительных осей и прочего, чтобы они не отвлекали от построения (их, безусловно, можно не удалять и компоновать на ваше усмотрение):
Как мы видим, полученная полоска занимает не всю ширину диаграммы, снизу и сверху мы видим пустые белые полосы.
В итоге получаем более компактный вид:
Остались небольшие детали, покрасим части полоски в подходящие цвета и добавим подпись данных на ряд:
Все готово, перейдем к следующему варианту.
Вариант 2. Прогресс бар со шкалой
Отличие этого варианта от предыдущего заключается лишь в дополнительной подложке под полоску, которая показывает уровни выполнения показателя, остальные части практически повторяют предыдущий вариант построения.
Для начала несколько модифицируем нашу таблицу и добавим на нее дополнительные ряды для построения шкалы:
В данном случае я указал шаг шкалы равным 10%, но можно поставить абсолютно любой по вашему усмотрению, главное чтобы сумма всех таких шагов давала 100% (10 шагов по 10% как в примере, или 20 шагов по 5% и т.д.).
Выделяем диапазон с данными A1:B11 и, как и в предыдущем примере, строим линейчатую гистограмму с накоплением:
Повторяем алгоритм и меняем строки и столбцы местами, чтобы диаграмма приобрела необходимый нам вид:
Как мы видим, у нас появилась достаточно длинная полоса, где в начале находится полоска, а в конце как раз разместилась шкала в виде маленьких разноцветных прямоугольников.
Покрасим каждый шаг шкалы в подходящий цвет, для этого левой кнопкой мыши выделяем каждый ряд по отдельности и делаем заливку соответствующим цветом (к примеру, первые 4 шага красим красным, 3 средние — желтым и 3 последние — зеленым):
Так как шкала должна быть подложкой (т.е. находиться позади основного ряда), то поместим основной ряд на второстепенную ось, чтобы он всегда находился над шкалой. Для этого в настройке формата ряда данных указываем построить ряд по вспомогательной оси (именно для ряда с основной полоской):
В результате настройки типов осей получаем:
Далее также для обеих осей указываем 0 и 1 как минимальную и максимальную границы, чтобы график был ровно от 0% до 100%:
Убираем название, оси данных и прочие ненужные в данный момент детали, настраиваем нулевой боковой зазор:
Также добавим подпись данных и получаем:
По усмотрению шкалу можно сделать не сплошной, а с разделителями, для этого установим для каждого ряда шкалы белую границу:
Спасибо за внимание!
Если у вас есть вопросы по теме статьи — пишите в комментариях.
Делаем индикатор прогресса с использованием только CSS
В данном уроке мы сделаем индикатор прогресса с использованием только CSS3, никаких изображений. Несмотря на это, дизайн индикатора будет вполне приличный.
Впечатление немного портит Opera 11, которая поддерживает CSS3, но не полностью.
Браузеры, которые совсем не поддерживают CSS3, будут выводить индикатор прогресса, но вид его будет совсем уж простым.
Полоска будет представлена элементом
Начало CSS
А внутренний элемент будет являться полоской заполнения индикатора прогресса. Мы будем выводить его как блочный элемент со значением высоты 100%, так что он будет растягиваться на все доступное пространство. Также используется набор правил CSS3 для задания градиента и скругления углов.
Другие цвета
Сделаем так, чтобы менять цвета было просто. Добавим класс «orange» или «red» к контейнеру и изменим его цвет.
Диагональные полоски
Анимируем диагональные полоски
Элемент будет такой же, как и псевдо элемент. Поэтому мы можем использовать те же значения.
. только исключим дублирование:
Мы будем перемещать фон и изменять его размер:
И вызываем анимацию:
Анимируем заполнение индикатора
К сожалению, мы не сможем анимировать естественным образом процесс изменения ширину от 0 до установленного во встроенном стиле значения.
Такой формат еще не поддерживается нигде. Поэтому придется использовать jQuery. Измеряем оригинальную ширину, изменяем ее на 0, а затем анимируем процесс восстановления до оригинального значения:
А как же HTML5?
HTML5 имеет специальную опцию для таких задач:
Вы может отключить стиль по умолчанию:
Так можно удалить глянец, который присутствует по умолчанию. Но вы все еще будете весьма ограниченны в возможностях по изменению элемента. Можно слегка поменять внешний вид следующими командами:
. на этом возможности по изменению внешнего вида элемента заканчиваются. Кроме того, внешний вид будет очень сильно различаться в разных браузерах, даже в семействе WebKit. псевдо элементы также несовместимы с таким решением.
Так что на текущий момент решение с парой div/span является очень хорошим вариантом.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/css3-progress-bars/
Перевел: Сергей Фастунов
Урок создан: 10 Марта 2011
Просмотров: 29100
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Индикатор прогресса HTML5
В HTML5 появился элемент индикатора прогресса, который выводит состояние процесса выполнения определенных задач, например, таких как загрузка данных на сервер.
В данном уроке мы рассмотрим, как добавлять такой элемент в документ, как определять для него стили CSS и анимировать индикатор прогресса.
Основы
Индикатор прогресса добавляется с помощью элемента
Так как базовая реализация использует стандартные формы, то визуальное представление будет зависеть от платформы реализации. Ниже приводится пример того, как выглядит индикатор прогресса в Windows и OSX.
Теперь определим стили для индикатора прогресса, чтобы он выглядел одинаково на любых платформах.
Стили для индикатора прогресса
В таблице стилей мы можем использовать селектор элемента для выбора элемента и добавления правил для элемента
. В ниже приведенном примере мы изменяем фоновый цвет, удаляем обводку и скругляем углы на радиус равный половине высоты элемента.
Однако, каждый браузер обрабатывает правила немного по своему.
В Firefox стили влияют на полоску индикатора, а на текущее значение не оказывают воздействия.
В Chrome и Safari стили не используются и применяются установки Webkit (в текущий момент времени).
Поэтому потребуется больше действий.
В Chrome и Safari элемент прогресса преобразуется следующим образом.
Таким образом для изменения полоски индикатора и текущего значения в браузере нужно добавить псевдо-классы:
Firefox также имеет специальный псевдо-класс ::-moz-progress-bar. В отличие от Chrome и Safari данный псевдо-класс ссылается на текущее значение:
В завершение представим все селекторы для определения стилей HTML5 индикатора прогресса.
Анимирование прогресса
Теперь рассмотрим, как анимировать индикатор прогресса. Обычно, полоска расширяется слева направо по мере выполнения задачи.
Идея заключается в том, что индикатор прогресса расширяется от 0 и останавливается в момент достижения максимального значения. Мы также будем выводить числовое значение прогресса. Ниже приводится структура HTML.
В данном примере мы используем jQuery для анимации индикатора прогресса. Поэтому добавляем jQuery в документ:
Затем мы добавляем скрипт, который выполняет расширение полоски прогресса. Сначала сохраняем элемент индикатора прогресса, текущее и максимальное значения, а также и частоту кадров:
Внутри выше приведенной функции устанавливаем интервал прогресса. Будем увеличивать данное значение на 1 за один кадр — можно увеличивать значение на большую величину, чтобы ускорить ход индикатора.
А затем мы добавляем результат к полоске прогресса.
Мы также показываем значение рядом с индикатором прогресса:
Затем мы создаем новую функцию для выполнения анимации:
В данной точке анимация уже работает, но значение будет увеличиваться бесконечно. Поэтому нам надо создать условное выражение для остановки анимации в момент достижения максимального значения.
Сохраним выше приведенную функцию в переменной:
В переменной loading добавляем условное выражение:
Выше приведенный код после достижения максимального значения сбрасывает интервал, что останавливает анимацию.
Приведем полный код анимации индикатора прогресса:
Поддержка в браузерах
Элемент HTML5 для индикатора прогресса поддерживается в следующих браузерах: Firefox 16+, Chrome 8+, Safari 6+ и Opera 11+.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.hongkiat.com/blog/html5-progress-bar/
Перевел: Сергей Фастунов
Урок создан: 4 Марта 2013
Просмотров: 38130
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.
Создание и стилизация индикатора выполнения в HTML5
Перевод: Влад Мержевич
В HTML5 добавлен элемент для индикатора выполнения, который позволяет показывать прогресс выполнения определённых задач вроде скачивания или загрузки, в основном всё, что занимает некоторое время.
В этой статье мы обсудим, как добавить этот элемент в документ, задать ему стиль через CSS и сделать анимацию прогресса.
Основы использования
Индикатор добавляется тегом
Поскольку речь идёт о встроенном индикаторе, его вид варьируется в зависимости от платформы. Ниже показано, как встроенный индикатор выглядит в Windows и OS X.
Давайте теперь попробуем стилизовать этот элемент, чтобы он выглядел одинаково на всех платформах.
Стилизация индикатора выполнения
В таблице стилей мы можем использовать селектор progress для добавления стилевых правил к элементу
. В данном примере мы меняем цвет фона, убираем границу и сделаем скругление, задав радиус в половину высоты.
Тем не менее, в браузерах имеются небольшие отличия. В Firefox стили применяются к самому индикатору, в то время как стиль бегунка не меняется.
В Chrome и Safari исходные стили убираются и заменяются на стили Webkit, так что стиль выше не применяется (по крайней мере, на данный момент).
Итак, нам нужно что-то ещё в таком случае.
В Chrome и Safari элемент
расшифровывается следующим образом.
Таким образом, чтобы изменить стиль индикатора выполнения и бегунка в этих браузерах, мы должны добавить такие псевдоклассы.
Окончательно собираем эти селекторы вместе для стилизации индикатора выполнения.
Анимация прогресса
Далее мы увидим как анимировать индикатор. Как правило, бегунок растёт слева направо по мере прогресса задачи. Идея состоит в том, бегунок будет расти от 0 и остановится, как только достигнет максимального значения. Будем также отображать значение числа по мере продвижения бегунка. Ниже приводится структура HTML.
В данном примере для анимации индикатора мы будем использовать jQuery, так что не забудьте вставить jQuery таким образом.
Затем мы добавим скрипт для увеличения прогресса. Вначале сохраним в переменных сам элемент, максимальное и текущее значение и период времени.
Внутри данной функции устанавливаем значение приращения. Будем увеличивать значение на 1 за каждый период времени — вы можете повысить это число, чтобы бегунок двигался быстрее.
Затем добавим полученный результат в индикатор.
И показываем значение рядом с индикатором выполнения.
Далее создаём новую функцию для запуска анимации.
В этот момент анимация уже действует, однако значение будет расти бесконечно. Итак, нужно создать условный оператор для анимации чтобы остановиться, когда анимация достигнет максимального значения.
Сохраним вышеприведённую функцию в переменной.
Затем внутри переменной loading добавляем условный оператор.
Вот и все коды для анимации индикатора выполнения.
Поддержка браузеров
полностью поддерживается в следующих браузерах: Firefox 16+, Chrome 8+, Safari 6+ и Opera 11+.
Что ещё почитать
Ниже приведено несколько хороших ссылок, чтобы покопаться в этом элементе дальше.