Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

Мы собираем и публикуем материалы не только на сайте, но и в нашей группе Вконтакте, нужно отметить то, что на сайте публикуются не все материалы, небольшая часть выкладывается только в группе.

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Разные скрипты » Индикатор прогресса HTML5

Индикатор прогресса HTML5

Опубликовал: artCreative™
Категория: Разные скрипты
Дата: 07 Февраля 2026 в 01:11

0 голосов

В HTML5 появился элемент индикатора прогресса, который выводит состояние процесса выполнения определенных задач, например, таких как загрузка данных на сервер.

В данном уроке мы рассмотрим, как добавлять такой элемент в документ, как определять для него стили CSS и анимировать индикатор прогресса.

Начнем.
Основы
Индикатор прогресса добавляется с помощью элемента <progress>. Значение индикатора определяется атрибутами value, min и max:

Код

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

Теперь определим стили для индикатора прогресса, чтобы он выглядел одинаково на любых платформах.
Стили для индикатора прогресса
В таблице стилей мы можем использовать селектор элемента для выбора элемента и добавления правил для элемента <progress>. В ниже приведенном примере мы изменяем фоновый цвет, удаляем обводку и скругляем углы на радиус равный половине высоты элемента.

Код

progress {
  background-color: #f3f3f3;
  border: 0;
  height: 18px;
  border-radius: 9px;
}

В Chrome и Safari элемент прогресса преобразуется следующим образом.

Код

<progress>
  ? <div> ::-webkit-progress-bar
  ? <div>::-webkit-progress-value

Таким образом для изменения полоски индикатора и текущего значения в браузере нужно добавить псевдо-классы:

Код

progress::-webkit-progress-bar {
  /* стили */
}
progress::-webkit-progress-value {
  /* стили */
}

Firefox также имеет специальный псевдо-класс ::-moz-progress-bar. В отличие от Chrome и Safari данный псевдо-класс ссылается на текущее значение:

Код

progress::-moz-progress-bar {
/* стили */
}

В завершение представим все селекторы для определения стилей HTML5 индикатора прогресса.

Код

progress {
  /* стили */
}
progress::-webkit-progress-bar {
  /* стили */
}
progress::-webkit-progress-value {
  /* стили */
}
progress::-moz-progress-bar {
  /* стили */
}[code]
<font size="5" style="font-size: 18pt;">Анимирование прогресса</font> Теперь рассмотрим, как анимировать индикатор прогресса. Обычно, полоска расширяется слева направо по мере выполнения задачи.
Идея заключается в том, что индикатор прогресса расширяется от 0 и останавливается в момент достижения максимального значения. Мы также будем выводить числовое значение прогресса. Ниже приводится структура HTML.
[code]<progress id="progressbar" value="0" max="100"></progress>

В данном примере мы используем jQuery для анимации индикатора прогресса. Поэтому добавляем jQuery в документ:

Код

Затем мы добавляем скрипт, который выполняет расширение полоски прогресса. Сначала сохраняем элемент индикатора прогресса, текущее и максимальное значения, а также и частоту кадров:

Код

var progressbar = $('#progressbar'),
  max = progressbar.attr('max'),
  value = progressbar.val(),
  time = (1000/max)*5;

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

Код

var loading = function() {

}

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

Код

value += 1;

А затем мы добавляем результат к полоске прогресса.

Код

addValue = progressbar.val(value);

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

Код

$('.progress-value').html(value + '%');

Затем мы создаем новую функцию для выполнения анимации:

Код

setInterval(function() {
loading();
}, time);

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

Код

var animate = setInterval(function() {
loading();
}, time);

В переменной loading добавляем условное выражение:

Код

if (value == max) {
clearInterval(animate);
}

Выше приведенный код после достижения максимального значения сбрасывает интервал, что останавливает анимацию.
Приведем полный код анимации индикатора прогресса:

Код

$(document).ready(function() {
  var progressbar = $('#progressbar'),
  max = progressbar.attr('max'),
  time = (1000/max)*5,
  value = progressbar.val();

  var loading = function() {
  value += 1;
  addValue = progressbar.val(value);

  $('.progress-value').html(value + '%');

  if (value == max) {
  clearInterval(animate);
  }
  };

  var animate = setInterval(function() {
  loading();
  }, time);
};

Ссылка на источник материала

Ссылка на ДЕМО

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 637 « Назад

Теги материала: html5, прогресса, индикатор

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Разные скрипты » Индикатор прогресса HTML5

Индикатор прогресса HTML5

Комментарии пользователей