Создание и оформление прогресс бара с помощью CSS3 и HTML5

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

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

Посмотреть примерСкачать

HTML5 часть — Создание и оформление прогресс бара

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

1

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

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

CSS3 часть

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

1
2
3
4
5
6
7

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

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

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

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

Для Safari и Chrome:

1
2
3
4
5
6
7

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

Для Firefox:

1
2
3

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

А все вместе они выглядят следующим образом:

1
2
3
4
5
6
7
8
9
10
11
12

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

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

HTML часть

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

1

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

jQuery часть

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

1

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

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

1
2
3
4

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

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

1
2
3

var loading = function() {  
 
}

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

1

value += 1;

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

1

addValue = progressbar.val(value);

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

1

$('.progress-value').html(value + '%');

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

1
2
3

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

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

Будем хранить результат функции в переменной

1
2
3

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

А внутри функции loading напишем условие:

1
2
3

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

Вывод

Данный элемент, если он красиво оформлен, также позволяет выделить ваш сайт. Я уже писал выше где он применяется, но, возможно, вы найдете ему новое предназначение 🙂 .

Успехов!

Источник: http://www.hongkiat.com/blog/html5-progress-bar/