Рассмотрим как сделать такой индикатор на CSS. Он выполнен на чистом CSS3, а мы знаем, что пока не все свойства CSS3 поддерживаются популярными браузерами, так например выглядит наш индикатор в Opera 11, которая поддерживает не все свойства нужные нам:

Как видите в браузерах, которые не полностью поддерживают CSS3 пример работает, пусть не полностью, со всеми эффектами, зато упрощенно и понятно.

HTML основа

Код будет состоять из двух элментов DIV, один из которых будет оберткой с классом meter, а другой (внутри него) собственно показателем процесса загрузки.

<div class="meter">
   <span style="width: 25%"></span>
</div>

CSS оформление

Мы создадим класс meter для обертки нашего бара. Для обертки мы не указываем ширину, поэтому она будет растягиваться на всю ширину его родителя. Ширину можно указать любую, мы укажем ее в 20px. Также сделаем закругленные углы и внутреннюю тень.

.meter {
   height: 20px; /* Можно любую */
   position: relative;
   background: #555;
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   border-radius: 25px;
   padding: 10px;
   -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
   -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
   box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3);
}

А это наш прогресс бар, мы сделаем ему высоту в 100%, чтобы он растянулся во всю высоту родителя. Добавим кучу CSS3 для придания вида как на картинке.

.meter > span {
   display: block;
   height: 100%;
   -webkit-border-top-right-radius: 8px;
   -webkit-border-bottom-right-radius: 8px;
   -moz-border-radius-topright: 8px;
   -moz-border-radius-bottomright: 8px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   -webkit-border-top-left-radius: 20px;
   -webkit-border-bottom-left-radius: 20px;
   -moz-border-radius-topleft: 20px;
   -moz-border-radius-bottomleft: 20px;
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
   background-color: rgb(43,194,83);
   background-image: -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(43,194,83)),
      color-stop(1, rgb(84,240,84))
   );
   background-image: -moz-linear-gradient(
      center bottom,
      rgb(43,194,83) 37%,
      rgb(84,240,84) 69%
);
   -webkit-box-shadow:
      inset 0 2px 9px rgba(255,255,255,0.3),
      inset 0 -2px 6px rgba(0,0,0,0.4);
   -moz-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;
}

Это была основная тема оформления.

Дополнительные темы оформления

Добавим оранжевую и красную темы для бара.

.orange > span {
   background-color: #f1a165;
   background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a));
   background-image: -webkit-linear-gradient(#f1a165, #f36d0a);
}

.red > span {
   background-color: #f0a3a3;
   background-image: -moz-linear-gradient(top, #f0a3a3, #f42323);
   background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323));
   background-image: -webkit-linear-gradient(#f0a3a3, #f42323);
}

Как конфетка

На западе, на Рождество можно есть такие конфетки полосатые (ну вы поняли). В таком вот стиле и оформим наши прогресс бары. Полосы лучше всего сделать с помощью псевдоэлементов, чем и займемся.

.meter > span:after {
   content: "";
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
   background-image:
   -webkit-gradient(linear, 0 0, 100% 100%,
      color-stop(.25, rgba(255, 255, 255, .2)),
      color-stop(.25, transparent), color-stop(.5, transparent),
      color-stop(.5, rgba(255, 255, 255, .2)),
      color-stop(.75, rgba(255, 255, 255, .2)),
      color-stop(.75, transparent), to(transparent)
   );
   background-image:
   -moz-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;
   -webkit-background-size: 50px 50px;
   -moz-background-size: 50px 50px;
   -webkit-animation: move 2s linear infinite;
   -webkit-border-top-right-radius: 8px;
   -webkit-border-bottom-right-radius: 8px;
   -moz-border-radius-topright: 8px;
   -moz-border-radius-bottomright: 8px;
   border-top-right-radius: 8px;
   border-bottom-right-radius: 8px;
   -webkit-border-top-left-radius: 20px;
   -webkit-border-bottom-left-radius: 20px;
   -moz-border-radius-topleft: 20px;
   -moz-border-radius-bottomleft: 20px;
   border-top-left-radius: 20px;
   border-bottom-left-radius: 20px;
   overflow: hidden;
}

Впервые эта идея пришла Лию Вероу.

Анимируем конфетку

Только Firefox 4 и браузеры на движке webkit могут анимировать псевдоэлементы. Что ж, искусство требует жертв. Создадим дополнительный класс animate.

<div>
   <span style="width: 50%"><span></span></span>
</div>

Оболочка будет точно такой же как псевдоэлемент, поэтому используем те же значения

.meter > span:after, .animate > span > span {...

И избегаем дублирования

.animate > span:after {
   display: none;
}

Будем двигать фон, меняя его размер

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

И вызываем эту анимацию

.meter > span:after, .animate > span > span {
   -webkit-animation: move 2s linear infinite;
}

Анимация во всю ширину

К сожалению нельзя сделать анимацию на auto или на настоящую ширину объекта, чтобы она шла от абсолютного нуля. Т.е. вот так.

@-webkit-animation expandWidth {
   0% { width: 0; }
   100% { width: auto; }
}

Поэтому придется применить немного jQuery

$(".meter > span").each(function() {
$(this).data("origWidth", $(this).width())
.width(0).animate({
   width: $(this).data("origWidth")
}, 1200);
});

Ну вот и все.
Смотрим пример.

Скачиваем пример.

А что HTML5?

HTML5 имеет элементы <progress> и <meter>, но вид они имеют системный, то есть тот вид прогрессбара, который используется в операционной системе. Вот так, например, выглядит бар в Mac OS.

Отключить стиль по-умолчанию можно так

progress {
   -webkit-appearance: none;
}

А изменить индикатор внутри так

progress::-webkit-progress-bar-value {
   -webkit-appearance: none;
   background: orangered;
}

Это перевод и небольшая адаптация статьи с сайта CSS-Tricks, оригинал можно найти здесь.

(1 votes, average: 5,00 из 5)

 Loading ...