BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про HTML » Индикатор прогресса HTML5 (тег – progress)

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

2017-03-20 / Вр:19:43 / просмотров: 2545

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

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

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

Пример:

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

Результат:

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

Загружено на 35%

Поменяйте в атрибуте «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;
}

Результат:

indikator-progressa-html5-teg-progress

Теперь оживим ползунок с помощью 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 type="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>

Результат:

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

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

Subscribe without commenting

Метки:

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 787
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4386