Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

Индикаторы html

Индикаторы html

Доброго времени суток дорогие друзья и приступим. Наверняка вы не раз видели индикаторы загрузок, к примеру когда устанавливается какая либо программа или загружается приложение. Индикатор загрузок представляет собой обычную полоску которая постепенно заполняется.

В 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>

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

На этом дорогие друзья я данную статью завершаю. Пользуйтесь с умом.

Я желаю вам успехов и удачи! Пока!

Оцените статью:

Статьи

Комментарии

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm