Створення progressbar за допомогою html

І знову здрастуйте, сьогодні ми будемо створювати смугу завантаження або як її ще називають - progressbar. А створювати ми його будемо одним з найпростіших методів, використовуючи HTML5. По суті сам прогрес бар можна застосовувати всюди де потрібен індикатор завершеності який-небудь операції в процентах (в опитуваннях, побудові графіків та інше). За допомогою CSS3 не складе складності його оформити за власним бажанням. І в нашому випадку немає необхідності використовувати зображення, що, безсумнівно, є великим плюсом.

У HTML5 є тег , який значно полегшить нам життя при створенні прогрес бару. Він має атрибут min, max і value. Щоб він з'явився на сторінці, необхідно написати наступне:

Коли ви вставите вищенаведений код в HTML, то побачите прогрес бар, який відображається за замовчуванням і з базовими стилями.

Якщо ви користувалися різними операційними системами, то могли помітити, що прогрес бари в них відрізняються.

А зараз призначимо власні стилі нашому прогрес бару. Як селектора в CSS файлі ми будемо використовувати сам тег progress:

Наприклад, вищенаведений код прибирає кордон у прогрес бару і фон робить сірим.

Зараз почнуться проблеми)
Історично сталося так, що для різних браузерів - різні селектори. Тому, щоб правильно відображався прогрес бар в різних браузерах, необхідно використовувати псевдо-селектори, призначені спеціально для конкретного браузера.

Для Safari і Chrome:

HTML
Наступним кроком буде створення анімації прогрес бару. Отже, прогрес бар заповнюється зліва направо. Тобто починається коли value = "0" і закінчується коли value = "максимум". Як приклад візьмемо наступний код:

jQuery
Для анімації прогрес бару будемо використовувати бібліотеку jQuery, тому її необхідно спочатку підключити:

Далі пишемо скрипт, який по суті і буде заповнювати наш прогрес бар. У першому рядку ми визначаємо той елемент, який буде заповнюватися (це і є прогрес бар), у другій отримуємо максимум прогрес бару з атрибута max:

Далі створюємо змінну, яка буде зберігати значення функції анімації:

Усередині даної функції ми будемо збільшувати заповнення прогрес бару на одну одиницю.

А потім привласнювати атрибуту value збільшене значення. Також ми будемо показувати відсоток завантаження поруч з прогрес баром:

Потім нам потрібна функція, яка запустить функцію анімації завантаження:

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

Будемо зберігати результат функції в змінної. А всередині функції loading напишемо умова:

Ось на цьому і все!) Просто, чи не так? Сподіваюся даний урок був вам корисний. Успіхів!