Від автора: В 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;
}
Але тут криється проблема, оскільки кожен браузер трохи по-своєму відображає дані стильові правила:
У Firefox стилі зачіпають тільки смугу завантаження, а індикатор завантаження, що відображає поточне значення, залишається незмінним.
У Chrome і Safari дані стилі зовсім не застосовуються, за винятком стилів з вендорным префіксом -webkit-.
Отже, в 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 );
