Создание progressbar при помощи HTML

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

 

HTML5

В HTML5 есть тег <progress>, который значительно облегчит нам жизнь при создании прогресс бара. Он имеет атрибут min, max и value. Чтобы он появился на странице, необходимо написать следующее:

 

<progress value="5" max="100"></progress>

 

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

Если вы пользовались различными операционными системами, то могли заметить, что прогресс бары в них отличаются.

 

CSS3

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

 

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

 

Например, вышеприведенный код убирает границу у прогресс бара и фон делает серым.

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

Для Safari и Chrome:

 

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

 

Для Firefox:

 

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

 

HTML
Следующим шагом будет создание анимации прогресс бара. Итак, прогресс бар заполняется слева направо. То есть начинается когда value="0" и заканчивается когда value="максимум". В качестве примера возьмем следующий код:

 

<progress id="progressbar" value="0" max="100"></progress>

 

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

 

<script src="js/jquery.js" type="text/javascript"></script>

 

Далее пишем скрипт, который по сути и будет заполнять наш прогрес бар. В первой строке мы определяем тот элемент, который будет заполняться(это и есть прогресс бар), во второй получаем максимум прогресс бара из атрибута max:

 

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

 

Далее создаем переменную, которая будет хранить значение функции анимации:

 

var loading = function() {  
 
}

 

Внутри данной функции мы будем увеличивать заполнение прогресс бара на одну единицу. 

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

 

value += 1;
addValue = progressbar.val(value);
$('.progress-value').html(value + '%');

 

Затем нам нужна функция, которая запустит функцию анимации загрузки:

 

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

 

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

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

 

var animate = setInterval(function() {  
    loading();  
}, time);
if (value == max) {  
    clearInterval(animate);  
}

 

Весь код:

 

$(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);
    };
});

 

Вот на этом и все!) Просто, не правда ли? Надеюсь данный урок был вам полезен. Удачи!