Доброго времени суток дорогие друзья и приступим. Наверняка вы не раз видели индикаторы загрузок, к примеру когда устанавливается какая либо программа или загружается приложение. Индикатор загрузок представляет собой обычную полоску которая постепенно заполняется.
В html5 был разработан специальный тег для отображения индикатора загрузок:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title >
Индикатор загрузок
</title>
</head>
<body>
<progress ></progress>
</body>
</html>как видите тег называется progress и скорее всего в современных браузерах он у вас будет анимирован. Данный тег может принимать в себя два атрибута:
max - максимальное значение
value - текущее значение
<progress max="100" value="30"></progress>здесь мы установили наш индикатор на значении 30.
Мы можем также данный тег стилизовать под себя, пример:
progress{
width:300px;
border:1px solid #00f;
padding:0;
margin:0;
height: 24px;
border-radius:10px;
}
progress::-webkit-progress-value {
background:green;
border-radius:10px;
}
progress::-webkit-progress-bar {
width: 100%;
height: 22px;
border-radius:10px;
background: #f1f1f1;
}здесь мы используем псевдоселекторы ::progress-bar - неактивная область загрузки и ::progress-value - активная область загрузки(ползунок), мы также здесь указали тернарный оператор -webkit
С этим мы разобрались теперь давайте перейдем к работе индикатора, а именно анимируем его.
Для этого мы используем javaScript:
<progress max="100" value="0"></progress>
<p>Время <span id="time"></span></p>
<script>
function time() {
var date = new Date(),value=0;
var hours = date.getHours(),
minutes = date.getMinutes(),
secconds = date.getSeconds();
if (hours < 10) {
hours = "0" + hours;
}
if (minutes < 10) {
minutes = "0" + minutes;
}
value = 100 / 60 *secconds;
document.querySelector('progress').value = value;
document.querySelector('#time').innerHTML = hours+" : "+minutes;
setTimeout(function(){
time();
},1000);
}
time();
</script>с помощью данного скрипта мы отображаем текущее время, причем секунды мы указываем в виде индикатора загрузок, то есть когда ползунок индикатора дойдет до конца у нас пройдет одна минута и отсчет начнется заново, в общем смотрите сами.
На этом дорогие друзья я данную статью завершаю. Пользуйтесь с умом.
Я желаю вам успехов и удачи! Пока!
