Прогресс-бар

CSS позволяет создавать динамические, адаптивные и легко модифицируемые веб-контенты минуя тяжелые изображения и плагины JavaScript. В этой статье пример, как сделать прогресс-бар с нуля используя только стили CSS.

Оглавление
  1. HTML для прогресс-бара
  2. Основной CSS
  3. Эффект градиента
  4. Глянцевый Эффект
  5. Эффект полос
  6. Анимации прогресс бара

В примере будет создан индикатор процесса как рисунке ниже:

Прогресс-бар на чистом CSS
Прогресс-бар с нуля используя только стили CSS

HTML для прогресс-бара

HTML для этих индикаторов обманчиво прост. Начните с создания элемента <div> с классом progress. Внутри блока <div> элемент <span>, который содержит область прогресс-бара.

Код HTML должен выглядеть следующим образом:

<div class="progress">
 <span></span>
</div>

Для визуальных эффектов на каждом индикаторе нужен отдельный класс CSS. Например, эффект градиента показан на рисунке выше, имеет класс gradient полосатый эффект с классом stripe. То же самое относится и к эффекту блеска.

К началу

Основной CSS

По сути вы должны создать два различных элемента; сам класс progress и элемент <span>. Аналогичные правила применяются к созданию стиля для других классов. После того как вы создали основные стили, вы закодировали необходимые эффекты, применяемые к элементу <span>.

Код CSS выглядит так:

.progress {
margin: 5px 0 3px;
border: 6px solid #333;
background: #333;
overflow: hidden;
-webkit-border-radius: 50px;
   -moz-border-radius: 50px;
        border-radius: 50px;

-webkit-box-shadow: 1px 1px 1px #777;
   -moz-box-shadow: 1px 1px 1px #777;
        box-shadow: 1px 1px 1px #777;
}
.progress > span {
display: block;
height: 20px;
width: 20%;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
        border-radius: 5px;
}

Цвет, поля, элементы высоты и другие свойства могут быть изменены в соответствии с фоном вашего сайта.

К началу

Эффект градиента

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

Еще одной проблемой является то, что Internet Explorer 8 не поддерживает многие из наиболее сложных стилей CSS3, включая градиентный фон. Способ обойти это в приведенном ниже коде, в котором применён фильтр в качестве запасного варианта. По крайней мере, пользователи IE8 увидят какой-то эффект градиента, а не просто цвет.

Эффект градиента для IE8:

.gradient > span {
-webkit-box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
   -moz-box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;
        box-shadow: 0 5px 5px rgba(255,255,255,0.6) inset, 0 -5px 7px rgba(0, 0, 0, 0.4) inset;

filter: progid:DXImageTransform.Microsoft.gradient( 
startColorstr='#33ffffff',
endColorstr='#33000000',
GradientType=0 );
}
К началу

Глянцевый Эффект

CSS3 фон свойствами градиента может быть эффективно использован для создания глянцевого прогресс-бар. Нужно наложить частично прозрачный глянцевый эффект на верх части индикатора, то есть вы можете использовать его, чтобы применить эффект блеска на любых основных цветах. Как и при создании эффект градиента, был создан класс gloss для определения требуемого стиля:

.gloss > span {
background-image: -moz-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,rgba(255,255,255,0.2)),
color-stop(45%,rgba(255,255,255,0.1)),
color-stop(55%,rgba(0,0,0,0.2)),
color-stop(100%,rgba(0,0,0,0.1)));
background-image: -webkit-linear-gradient(top,
rgba(255,255,255,0.5) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -o-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: -ms-linear-gradient(top,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
background-image: linear-gradient(to bottom,
rgba(255,255,255,0.2) 0%,
rgba(255,255,255,0.1) 45%,
rgba(0,0,0,0.2) 55%,
rgba(0,0,0,0.1) 100%);
}
К началу

Эффект полос

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

.stripe > span {
background-size: 30px 30px;
background-image: -moz-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(0%,rgba(255,255,255,0.2)),
color-stop(25%,rgba(255,255,255,0.2)),
color-stop(25%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0)),
color-stop(50%,rgba(255,255,255,0.2)),
color-stop(75%,rgba(255,255,255,0.2)),
color-stop(75%,rgba(255,255,255,0)),
color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(-45deg,
rgba(255,255,255,0.3) 0%,
rgba(255,255,255,0.3) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.3) 50%,
rgba(255,255,255,0.3) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(-45deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
background-image: linear-gradient(135deg,
rgba(255,255,255,0.15) 0%,
rgba(255,255,255,0.15) 25%,
rgba(255,255,255,0) 25%,
rgba(255,255,255,0) 50%,
rgba(255,255,255,0.15) 50%,
rgba(255,255,255,0.15) 75%,
rgba(255,255,255,0) 75%,
rgba(255,255,255,0) 100%);
}
К началу

Анимации прогресс бара

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

Вы можете изменить ключевые кадры и анимацию изменяя по своему усмотрению, а затем применить класс для любого <span>, чтобы применить эффект анимации прогресс бар.

.animate {
-webkit-animation: progress 2s linear infinite;
   -moz-animation: progress 2s linear infinite;
    -ms-animation: progress 2s linear infinite;
     -o-animation: progress 2s linear infinite;
        animation: progress 2s linear infinite;
}
@-webkit-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@-moz-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@-ms-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@-o-keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}
@keyframes progress {
from {
background-position: 0 0;
}
to {
background-position: -60px -60px;
}
}

Это не единственный способ сделать анимации CSS3 для прогресс-бара, еще неплохие эффекта анимации при загрузке смотрите на страницах Анимационная загрузка CSS3 и Анимационная загрузка с помощью Ajax.

Статья подготовлена для вас коллективом сайта htmlhook.ru
Оригинал статьи: http://www.sitepoint.com/create-your-own-css3-progress-bars/
Перевел: Виктор Клим
Правила использования материалов сайта!