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

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

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

css3 progress bars

Прогресс-бар с нуля, используя только стили CSS3

HTML

HTML для этих индикаторов обманчиво прост. Начните с создания элемента <div> с классом progress. В рамках этого элемента, создан элемент <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;
  border-radius: 50px;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  box-shadow: 1px 1px 1px #777;
  -moz-box-shadow: 1px 1px 1px #777;
  -webkit-box-shadow: 1px 1px 1px #777;
  }
  .progress > span {
  display: block;
  height: 20px;
  width: 20%;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  }

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

к меню ↑

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

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

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

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

.gradient > span {
  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;
  -webkit-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 {
  animation: progress 2s linear infinite;
  -moz-animation: progress 2s linear infinite;
  -webkit-animation: progress 2s linear infinite;
  -ms-animation: progress 2s linear infinite;
  -o-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/
Перевел: Виктор Клим
Правила использования материалов сайта!