Як використовувати і стилізувати смугу завантаження в HTML5

Від автора: В HTML5 з’явився новий елемент – progress, який працює також, як і звичайна смуга завантаження (progress bar), і використовується для того, щоб візуалізувати процес виконання певного завдання, наприклад, завантаження даних на сервер.

У даній статті розглядається приклад того, як додавати подібні елементи на сторінку і стилізувати їх; також в цій статті показаний метод зміни значень в таких елементів з допомогою JavaScipt.

Додавання смуги на сторінку завантаження

Щоб додати смугу завантаження на сторінку, необхідно використовувати елемент progress. Значення смуги завантаження визначаються з допомогою атрибутів value і max. Ось приклад:

Оскільки в базовій реалізації використовуються стандартні форми, то візуальне подання даного елемента залежить від платформи. Нижче наведено приклад того, як смуга завантаження виглядає в Windows 7.

Як вже було сказано, елемент progress є звичайною смугою завантаження HTML5 і, простіше кажучи, відображає прогрес виконання якого-небудь завдання. При цьому атрибут max визначає максимальне значення, необхідне для виконання задачі, а атрибут value визначає, скільки вже виконано на поточний момент.

Браузерна підтримка: Chrome 8+, Firefox 16+, IE 10+, Opera 11+, Safari 6+.

Стилізація смуги завантаження

Тепер давайте визначимо стилі для смуги завантаження, щоб вона виглядала однаково на всіх платформах. Щоб додати стилі для елемента progress, ми просто використовуємо селектор тега. У наступному прикладі ми змінюємо колір фону, прибираємо кордону і скругляем кути у даного елемента.

progress {
background-color: #00FEFD;
border-radius: 10px;
border: 0;
height: 20px;
width: 200px;
}

Але тут криється проблема, оскільки кожен браузер трохи по-своєму відображає дані стильові правила:

Отже, в Chrome та Safari зовнішній вигляд елемента progress може бути змінений завдяки використанню псевдо-класів: -webkit-progress-bar і -webkit-progress-value. Перший з них використовується для визначення стилів для завантаження смуги, а другий – для індикатора завантаження (поточне значення виконуваного завдання).

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

У Firefox є власний псевдо-клас -moz-progress-bar, який можна використовувати тільки для стилізації індикатора прогресу.

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

Ось повний список всіх селекторів, необхідних для стилізації елемента progress.

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

Зміна значення смуги завантаження з допомогою JavaScript

А тепер давайте розглянемо простий приклад використання смуги завантаження з наступним HTML-кодом.

Щоб змінити значення смуги завантаження JavaScript, можна використовувати наступний код.

document.getElementById( ‘demo-progress-bar’ ).value = 45;

Даний код змінює значення елемента progress, id якого дорівнює «demo-progress-bar», на 45. Ось простий JavaScript код, який змінює значення елемента progress з 0 до 100, збільшуючи значення на одиницю кожні 100 мілісекунд.

var counter = 0;
function progressDemo() {
counter++;
document.getElementById( ‘demo-progress-bar’ ).value = counter;
if( counter == 100 ) {
clearInterval( timer );
}
}
var timer = setInterval( progressDemo, 100 );