Прогресс бар для сайта

HTML5 ввел отличный элемент прогресс бар

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

Основы использования

Прогресс бар может быть добавлен тегом

. Значение индикатора определяется на основе минимального и максимального атрибутов, следующим образом:

Поскольку речь идет о нативном прогресс баре, вид будет меняться в зависимости от платформы. Ниже видно как стандартный индикатор выглядит в Windows и OSX.

Теперь, давайте попробуем оформить этот индикатор, чтобы он имел одинаковый или аналогичный вид на всех платформах.

Оформление прогресс бара

В таблице стилей, мы можем обращаться к селектору

для добавления нужных нам стилей. В наших примерах мы изменим цвет фона, удалим границу, и сделаем углы плавными.

Мы увидим, что каждый браузер обрабатывает стили по-своему.

В Chrome и Safari, будут удалены наши стили и заменены на Webkit стили, (по крайней мере, на данный момент).

Итак, нам нужны обходные пути.

В Chrome и Safari, обращение к элементу

Таким образом, мы должны добавить эти Webkit псевдо-классы.

Firefox также имеет свой специальный псевдо-класс

В отличие от Chrome и Safari, этот псевдо-класс в Firefox относится к значению (ползунку).

И так, вот все наши стили для стилизации

Примеры

Собственно, нет ничего сложного чтобы стилизовать этот элемент. Еще раз подведем итог, что бы стало все понятно. Сначала пишем правило для progress, это правило будет у нас являться также правилом для фона элемента в браузерах mozilla. Потом пишем отдельно правила для фона и ползунка для браузеров Chrome, и в заключении для ползунка в mozilla.
Вот первый пример:

HTML

Элемент div тут просто для выравнивания и небольшой красоты.
CSS

Не пугайтесь всей этой кучи правил, это правила для css3 градиента и теней, который я просто скопировал с http://www.colorzilla.com/gradient-editor/ и с http://css3generator.com/ сайтов.
Вы можете убрать эти градиенты и получить более простой пример:

Еще один пример с фэйковой демонстрацией работы:

HTML

CSS

jQuery
Для анимации создадим простенький скрипт.

Кому интересна реализация скрипта:
Идея состоит в том, индикатор будет расширяться от 0 и остановится как только он достигнет максимального значения. Также будем отображать числовое значение.
Сохраняем элемент индикатора, значение индикатора прогресса, максимальное значение, а также время в переменные.

Затем мы создаем переменную, которая повторит функции анимации. В этом примере мы называем переменную loading.

Внутри функции выше, мы устанавливаем прогресс интервала. Будем увеличивать значение на 1.

И потом, добавим результат на прогресс бар.

Мы также показываем, значение рядом с индикатором:

Далее, мы создаем новую функцию для запуска функции анимации.

В этот момент, анимация уже функционирует. Однако значение будет расти бесконечно. Итак, нам нужно создать условный оператор для анимации, чтобы остановить ее, когда она достигает своего максимального значения. Внутри переменной loading, мы добавим условный оператор:

Приветствую Вас, дорогие читатели блога beloweb.ru. В этот осенний день я хочу представить Вам классную подборку замечательных прогресс баров и графиков для Ваших сайтов с использованием JQuery, HTML5 и CSS3.

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

Красивые круглые прогресс бары

Несколько не плохих прогресс баров, которые можно изменить с помощью мыши при наведении.

Стильный прогресс бар с использованием CSS3

Замечательный и современный прогресс бар, который начинает работать когда пользователь нажимает на цифры ниже.

Анимированный прогресс бар для сайта с JQuery и CSS3

Классный прогресс бар для Вашего сайта. Нужно просто ввести значение в процентах, затем нажать enter, и далее всё произойдёт автоматически и очень красиво.

Прогресс бар с всплывающей подсказкой

Современный и очень красивый прогресс бар при наведении на который всплывает плавная подсказка.

Мощный график для сайта с JQuery

Классный и мощный график для Вашего сайта, в которым присутствуют всплывающие подсказки.

Удивительный график для сайта на JQuery

Большой и очень красивый график, в котором встроены классные всплывающие подсказки. В общем супер.

Круглый и анимационный график на HTML5

Клёвый график в круглой форме, так же есть красивое анимационное выделение каждого отдельного процента.

Очень красивый, мощный и современный график для сайта.

Ну просто классный график. Есть два режима просмотра: круглый и треугольный. Очень порадовал обзор процентов по годам.

Несколько вариантов графиков для Вашего сайта на jQuery и HTML5

Замечательные графики в тёмном оформлении, так же присутствует несколько вариантов оформления диаграмм.

Красивый прогресс бор на CSS

Замечательный и стильный прогресс бар зелёного цвета.

Красивый график голубого цвета

Замечательный график для сайта в светлом оформлении

График из линий на чистом CSS

Не плохой линейный график, который сделан на чистом CSS.

Наличие на сайте прогресс бара действительно будет полезным, когда пользователю требуется сообщить о том, что на странице происходит что — то при долгом выполнении скрипта. Из этой статьи вы узнаете, как установить к себе на сайт progressbar, затратив на это всего пару минут времени.

Есть множество скриптов и плагинов, реализующих такой — же функционал, но, как по мне, этот вариант — наиболее простой и короткий. Для начала мы добавим HTML прогресс бара на страницу:

Теперь пропишем стандартные стили для этой структуры:

С подготовительным этапом покончено. Осталось подключить функцию или добавить её к себе в проект:

Функция progressBar() принимает два параметра: процент выполнения и элемент. Вызов её будет выглядеть таким образам:

Как видите, вам потребуется всего четыре строки кода, чтобы реализовать у себя красивый анимированный прогресс бар. В архиве с примером вы найдёте пять вариантов стилей прогресс бара. Стандартные стили не отвечают за визуальное представление скрипта, поэтому стоит подключить один из вариантов, например – это будут стили, лежащие в папке default, с таким же названием добавляем класс к диву с >

После выполнения всех этих действий у вас на странице появится довольно хороший и удобный прогресс бар.