Индикатор прогресса HTML5 (тег – progress)

Если вам на сайте нужно сделать индикатор завершенности задачи, например, конец загрузки файлов на сервер, то в HTML5 для этого существует специальный тег <progress>.  С помощью тега <progress> вы сможете сделать полоску загрузки. Хотя, через JavaScript придется настраивать изменение ее значений.
Сейчас вы все увидите и поймете.

Атрибуты тега <progress>:

• Value – текущее значение прогресса.
• Max – максимальное значение прогресса.

Пример:

Пожалуйста, подождите, резюме загружаются.
<progress max="100" value="35"></progress>  Загружено на <span id="value">35</span>%

Результат:

Пожалуйста, подождите, резюме загружаются.

Поменяйте в атрибуте «value» значение до 100. Сейчас там 35, замените на 75 или 100.
Теперь поняли, как это работает? Естественно, значение меняется через JavaScript, а не вручную.

Оформление в CSS

Для оформления индикатора загрузки используйте вот такие псевдоклассы:

progress {
/* стили */
}
progress::-webkit-progress-bar {
/* Chrome и Opera */
/* стили для полоски загрузки */
}
progress::-webkit-progress-value {
/* Chrome и Opera */
/* стили для ползунка */
}
progress::-moz-progress-bar {
/* стили для Firefox */
/* стили для полоски загрузки */
}

Пример:

progress {
border:0;
width: 300px;
height: 20px;
border-radius: 10px;
background: #f1f1f1;
}
progress::-webkit-progress-bar {
width: 300px;
height: 20px;
border-radius: 10px;
background: #f1f1f1;
}
progress::-webkit-progress-value {
border-radius: 10px;
background: #ffb76b;
}
progress::-moz-progress-bar {
border-radius: 5px;
background: #ffb76b;
}

Результат:

Теперь оживим ползунок с помощью JavaScript:

<progress id="progress" value="0" max="100"></progress>
<script>
function getProgress(){
if(document.getElementById('progress').value>=document.getElementById('progress').max) return false;
document.getElementById('progress').value++;
setTimeout(getProgress,50);
}
getProgress();
</script>

Результат:

[ посмотреть демонстрацию ]

А можно вывести значение загрузки еще и цифрами:

<script ENGINE="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
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);
});
</script>
<div class="progress-bar-wrapper">
<progress id="progressbar" value="0" max="100"></progress>
<span class="progress-value">0%</span>
</div>

Результат:

[ посмотреть демонстрацию ]

А можно и вот так на чистом JS:

<div style="width: 300px; height: 20px; position: relative; background: #ccc; ">
<progress id="line" style="widht: 0%; height: 100%; position: absolute; background: #ccc;" ></progress>
<div id="number" style="width: 100%; height: 100%; position: absolute; text-align: center; ">0%</div>
</div>

<script>
(function(){
var number = document.querySelector("#number");
var line = document.querySelector("#line");
var current = parseInt(number.innerHTML);

if(current < 100){
setTimeout(arguments.callee,30);
line.style.width = (current + 1) + '%';
number.innerHTML = (current + 1) + '%';
}
})();
</script>

Результат:

[ посмотреть демонстрацию ]

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

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: html