Создать CSS3 прогресс бар

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

Прежде чем мы начнем, для этой целей рекомендуется вам установить последнюю версию Firefox , Chrome или Safari .

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

css3 progress bars

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

Шаг 1: HTML

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



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


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

Шаг 2: Основные 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;
  }


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

Шаг 3: эффект градиента

Вместо того чтобы использовать эффект градиент CSS3, было бы более эффективно использовать пропорции box-shadow для создания необходимого эффекта. Свойство градиента делает больше, чем просто создание градиента, так что лучше его использовать при написании более сложных эффектов. Еще одной проблемой является то, что Internet Explorer 8 не поддерживает многие из наиболее сложных стилей CSS3, включая градиентный фон. Способ обойти это, вы заметите, в приведенном ниже коде, в котором применён фильтр в качестве запасного варианта. По крайней мере, пользователи 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 );
  }


Шаг 4: Глянцевый эффект

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%);
    }


Шаг 5: Эффект полос

Чтобы создать эффект полосы, нужно создать класс «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%);
}


Шаг 6: Анимированние прогресс бар

Если вы выполните эти действия до конца, то вы должны уже признать потенциал 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;
  }
}


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

2 комментария на тему “Создать CSS3 прогресс бар”

  1. комментарии

    Обалдеть сколько в комментариях ботов отписалось :)
    интерестно а живые то комменты тут пропускают?

  2. комментарии

    Пропустят, если не писать ерунду, с ошибками в словах!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML -теги и атрибуты: <a href= http://pixelcom.crimea.ua/"" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>