Прогресс бар на чистом CSS3

Сегодня речь пойдет о том как при помощи CSS3 сделать различные красивые прогресс бары (Progress Bars).

В рамках данного урока мы сделаем несколько прогресс баров. Они выглядят так:

ПОСМОТРЕТЬ ДЕМО   СКАЧАТЬ ИСХОДНИКИ

Они не используют изображения, только HTML и CSS3.

HTML разметка

Сам бар будет <div>с классом progressbar. Внутри него есть <span>«заполнение» область индикатора выполнения. Это установлено со встроенным стилем. Это разметка, которая будет знать, как далеко заполнить индикатор выполнения, так что это тот случай, когда встроенные стили имеют смысл.

Основа:

<div class="progressbar">
  <span style="width: 30%"></span>
</div>

Основные CSS стили

Оболочка div — это трек индикатора выполнения. Мы не будем устанавливать ширину, поэтому она будет растягиваться так же широко, как и ее родитель, как это делает элемент уровня блока. Вы могли бы хотя. Высота тоже произвольная. Здесь он установлен на 20 пикселей, но может быть любым.

.progressbar { 
	height: 20px;
	position: relative;
	background: #555;
	padding: 3px;
	box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
}

Тогда промежуток внутри будет заполнять часть индикатора выполнения. Мы сделаем так, чтобы он отображался в виде блока с высотой 100%, поэтому он растягивается, чтобы соответствовать любой комнате, в которой он находится. Затем мы будем использовать связку CSS3, чтобы придать ей градиентный вид.

.progressbar > span {
  display: block;
  height: 100%;
  background-color: rgb(43,194,83);
  background-image: linear-gradient(
    center bottom,
    rgb(43,194,83) 37%,
    rgb(84,240,84) 69%
  );
  box-shadow: 
    inset 0 2px 9px  rgba(255,255,255,0.3),
    inset 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  overflow: hidden;
}

Получаем типовой прогресс бар

Добавляем другие цвета

Давайте сделаем так, чтобы как можно проще изменить цвет. Просто добавьте имя класса «оранжевый» или «красный» в оболочку div, и цвет переопределится.

.orange > span {
  background-color: #f1a165;
  background-image: linear-gradient(to bottom, #f1a165, #f36d0a);
}
.red > span {
  background-color: #f0a3a3;
  background-image: linear-gradient(to bottom, #f0a3a3, #f42323);
}

Ну и добавим дополнительные прогресс бары

<div class="progressbar">
  <span style="width: 30%"></span>
</div>
<div class="progressbar orange">
  <span style="width: 38%"></span>
</div>
<div class="progressbar red">
  <span style="width: 45%"></span>
</div>

получим

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

Делаем полосатый эффект

Мы можем получить крутой полосатый эффект, добавив еще один элемент поверх этого диапазона и наложив на него повторный CSS3-градиент. Семантически это лучше всего достигается с помощью псевдоэлемента, поэтому давайте сделаем это таким образом. Мы собираемся абсолютно точно позиционировать его в точной области пролета (которая уже имеет относительное расположение).

.progressbar > span:after {
  content: "";
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background-image: linear-gradient(
    -45deg, 
    rgba(255, 255, 255, .2) 25%, 
    transparent 25%, 
    transparent 50%, 
    rgba(255, 255, 255, .2) 50%, 
    rgba(255, 255, 255, .2) 75%, 
    transparent 75%, 
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  overflow: hidden;
}

Получаем

Анимируем полоски (придаем им движение)

Для этого, давайте в css следующий код.

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

ПОСМОТРЕТЬ ДЕМО   СКАЧАТЬ ИСХОДНИКИ