dev

ProgressBar — это набор стилей CSS, который позволяет создавать индикаторы прогресса.

Installation

CSS

HTML

Примечание: используйте <span> для отображения элементов в одну линию на мобильных устройствах.

Кастомизация

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

Изменение цвета (сплошной)

[Исходный код] 

.progress { color: #fff; }
.progress > .bar { background: #555; }

Изменение цвета (градиент)

[Исходный код] 

.progress { color: #fff; }
.progress > .bar {
    background:
        -webkit-linear-gradient(-45deg, 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, .25)),
        -webkit-linear-gradient(left, #09c, #f44);
}

Округлые края

[Исходный код] 

.round.progress {
    border-radius: 99px;
    overflow: hidden;
}

Узкий индикатор

[Исходный код] 

.progress,
.progress > .bar { height: 6px; }

Тень

[Исходный код] 

.progress { box-shadow: inset 0 1px 5px #aaa; }

Анимации

[Исходный код] 

.progress > .bar {
    animation: animate 1s linear infinite;
    background-image: linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .15) 33%, rgba(0,0, 0, .15) 66%, transparent 66%);
    background-size: 40px;
}
@keyframes animate {
    from { background-position: 0; }
    to { background-position: 40px; }
}

Examples

Для стилей, которые используются в примерах ниже, см. MediaWiki:ProgressBar.css.

Индикатор без показа отношения
Индикатор без текста
15%
Тёмный индикатор100/200
Градиентный индикатор30%
Индикатор с округлыми краями75%
Индикатор с тенями внутри45%
Узкий индикатор
Анимированный индикатор95%