элемент HTML5 Progress

HTML5 Progress — оформляем красивые прогресс-бары с помощью CSS3

HTML5 Progress – это современный элемент новой спецификации, который представляет собой процентный индикатор с линией показателя.

Ни один UI Kit набор не останется без демонстрации элементов прогресс баров. Тег progress в настоящее время поддерживается всеми современным браузерами и представляет собой шкалу с индикатором «заполненности». Однако, стандартное оформление данного элемента у разных обозревателях оставляет желать лучшего. В большинстве своем это одноцветные полосы, скучные и неинтересные.

Используем CSS3 для оформления HTML5 Progress

Сегодня можно найти не мало плагинов JavaScript, которые создадут Вам полный реворк прогресс баров. Но наша цель стоит в простом и изящном решении. Обозначим HTML структуру:

<ul>
    <li>
        <h2>Frontend</h2>

        <!-- HTML5 -->
        <p style="width:80%" data-value="80">HTML5</p>
        <progress max="100" value="80" class="html5">
            <div class="progress-bar">
                <span style="width: 80%">80%</span>
            </div>
        </progress>

        <!-- CSS3 -->
        <p style="width:60%" data-value="60">CSS3</p>
        <progress max="100" value="60" class="css3">
            <div class="progress-bar">
                <span style="width: 60%">60%</span>
            </div>
        </progress>

        <!-- jQuery -->
        <p style="width:50%" data-value="50">jQuery</p>
        <progress max="100" value="50" class="jquery">
            <div class="progress-bar">
                <span style="width: 50%">50%</span>
            </div>
        </progress>

    </li>
</ul>

Как видно из кода, мы используем тег progress совместно с атрибутами max и value. Эти интуитивно понятные параметры задают максимальное и текущее значение.

Перейдем к стилизации:

/* Определим базовые стили прогресс-элементов */

progress[value] {
    /* Избавляемся от внешнего вида по умолчанию */
    
    appearance: none;
    /* Это, к сожалению, оставляет след за границы в Firefox и Opera. Мы можем удалить, установив границы нет. */
    
    border: none;
    /* Добавим размеры */
    
    width: 100%;
    height: 20px;
    /* Хотя Firefox не предоставляют каких-либо дополнительных псевдоклассов, элемент прогресса работает в контейнере. */
    
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5) inset;
    
    color: royalblue;
    position: relative;
    margin: 0 0 1.5em;
}

WebKit-браузеры обеспечивают два псевдо-класса, которые можно использовать в стиле HTML5 Progress элемента:

progress[value]::-webkit-progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5) inset;
}
progress[value]::-webkit-progress-value {
    position: relative;
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius: 3px;
    /* Let's animate this */
    
    animation: animate-stripes 5s linear infinite;
}
@keyframes animate-stripes {
    100% {
        background-position: -100px 0;
    }
}

Давайте оживим наш пример немного, используя псевдо-элементы:

progress[value]::-webkit-progress-value:after {    
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    top: 7px;
    right: 7px;
    background-color: white;
    border-radius: 100%;
}

Firefox обеспечивает один псевдокласс в стилях элемента:

progress[value]::-moz-progress-bar {    
    background-image: -moz-linear-gradient( 135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)), -moz-linear-gradient( left, #09c, #f44);
    background-size: 35px 20px, 100% 100%, 100% 100%;
    border-radius: 3px;
    /* Firefox doesn't support CSS3 keyframe animations on progress element. Hence, we did not include animate-stripes in this code block */
}

Резервный метод, стили:

.progress-bar {
    background-color: whiteSmoke;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0, 0, 0, .5) inset;    
    width: 100%;
    height: 20px;
}
.progress-bar span {
    background-color: royalblue;
    border-radius: 3px;
    display: block;
    text-indent: -9999px;
}
p[data-value] {
    position: relative;
}

Процент автоматически изменится, как только мы поменяем значение ширины бара:

p[data-value]:after {
    content: attr(data-value) '%';
    position: absolute;
    right: 0;
}
.html5::-webkit-progress-value,
.python::-webkit-progress-value {    
    background-image: -webkit-linear-gradient( 135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)), -webkit-linear-gradient( left, #09c, #f44);
}
.css3::-webkit-progress-value,
.php::-webkit-progress-value {    
    background-image: -webkit-linear-gradient( 135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)), -webkit-linear-gradient( left, #09c, #ff0);
}
.jquery::-webkit-progress-value,
.node-js::-webkit-progress-value {    
    background-image: -webkit-linear-gradient( 135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)), -webkit-linear-gradient( left, #09c, #690);
}

Аналогично, для Mozilla. К сожалению, комбинируя стили для разных браузеров это может повлиять на отображение в любом другом браузере. Следовательно, нужен отдельный блок.

.html5::-moz-progress-bar,
.php::-moz-progress-bar {    
    background-image: -moz-linear-gradient( 135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)), -moz-linear-gradient( left, #09c, #f44);
}
.css3::-moz-progress-bar,
.php::-moz-progress-bar {
    {        
        background-image: -moz-linear-gradient( 135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)), -moz-linear-gradient( left, #09c, #ff0);
    }
    .jquery::-moz-progress-bar,
    .node-js::-moz-progress-bar {        
        background-image: -moz-linear-gradient( 135deg, transparent, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -moz-linear-gradient( top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .2)), -moz-linear-gradient( left, #09c, #690);
    }

Теперь мы точно можем быть уверены, что наши стили будут максимально корректно в разных браузерах.

Полный код примера Вы можете взять с Pen`а по ссылке выше. Удачи!

3778 просмотров