Створення і оформлення прогрес бару за допомогою css3 і html5

Відео: How to Create Progress Bar | HTML Tutorials | CSS Tutorials | javascript Tutorials

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

Реальний приклад прогрес бару можна побачити тут:

Подивитися прімерСкачать

HTML5 частина - Створення і оформлення прогрес бару

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

1

value="5" max="100"gt; lt;/progressgt;

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

CSS3 частина

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

1234567

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

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

Для різних браузерів різні селектори

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

для Safari і Chrome:

1234567

progress:: -webkit-progress-bar {/ * Ваші стилі * /}progress:: -webkit-progress-value {/ * Ваші стилі * /}

для Firefox:

123

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

А всі разом вони виглядають наступним чином:

Відео: HTML 5 Tutorial Progress Bar For Progressive javascript Events Processing or File Upload

123456789101112

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

Анімація прогрес бару

HTML частина

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

1

id="Progressbar" value="0" max="100"gt; lt;/progressgt;

jQuery частина

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

1

lt;script src="Js / jquery.js" type="Text / javascript"gt; lt;/scriptgt;

Відео: Circular Progress Loader Canvas javascript Programming Tutorial

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

1234

var progressbar = $(`#progressbar`),max = progressbar.attr(`Max`),value = progressbar.val(),time = (1000/max)*5-

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

123

var loading = function() {}

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

1

value += 1-

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

1

addValue = progressbar.val(value)-

Також ми будемо показувати відсоток завантаження поруч з прогрес баром:

1

$(".progress-value `).html(value + "% `)-

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

123

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

Відео: Step progress bar Tutorial, CSS

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

Будемо зберігати результат функції в змінної

123

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

А всередині функції loading напишемо умова:

123

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

Нижче представлений весь код:

123456789101112131415161718192021222324252627

$(document).ready(function() {if(!Modernizr.meter){alert(`Вибачте, але Ваш браузер не підтримує HTML5 прогрес бар!`)-}else{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)-}-})-

висновок

Даний елемент, якщо він красиво оформлений, також дозволяє виділити ваш сайт. Я вже писав вище де він застосовується, але, можливо, ви знайдете йому нове призначення # 128578; .

Успіхів!

джерело: https://hongkiat.com/blog/html5-progress-bar/