Делаем индикатор прогресса с использованием только CSS

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

Впечатление немного портит Opera 11, которая поддерживает CSS3, но не полностью.

Браузеры, которые совсем не поддерживают CSS3, будут выводить индикатор прогресса, но вид его будет совсем уж простым.

 

HTML

Полоска будет представлена элементом <div> с классом meter. Внутри <div> будет иметься элемент <span>, который будет работать как заполненная часть индикатора прогресса. Процент заполнения будет устанавливаться встроенным указанием стиля, так как именно разметка HTML содержит информацию о проценте заполнения индикатора. Альтернатива CSS в виде отдельного файла будет выглядеть как "fill-10-percent", "fill-one-third" или что-то подобное, что является более тяжеловесным решением, обладающим меньшей гибкостью при использовании.

Основа:

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

 

Начало CSS

Контейнер <div> является "корпусом" индикатора. Мы не будем устанавливать ширину, поэтому он будет растягиваться на всю ширину родительского элемента, что соответствует поведению блочного элемента по умолчанию. Вы можете сделать так, как нужно вам. Высота также устанавливается произвольно. В нашем примере установлено значение 20 px для высоты, но она может быть любой. Также используются закругленные углы и тени для улучшения внешнего вида индикатора.

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

А внутренний элемент <span> будет являться полоской заполнения индикатора прогресса. Мы будем выводить его как блочный элемент со значением высоты 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" или "red" к контейнеру и изменим его цвет.

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

 

Диагональные полоски

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

.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 могут выполнять анимации с ключевым кадром. Поэтому, к сожалению, придется добавить дополнительный элемент <span>,  который будет анимироваться в браузерах WebKit.

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

Элемент <span> будет такой же, как и псевдо элемент. Поэтому мы можем использовать те же значения...

.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;
}

 

Анимируем заполнение индикатора

К сожалению, мы не сможем анимировать естественным образом процесс изменения ширину от 0 до установленного во встроенном стиле значения.

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

Такой формат еще не поддерживается нигде. Поэтому придется использовать jQuery. Измеряем оригинальную ширину, изменяем ее на 0, а затем анимируем процесс восстановления до оригинального значения:

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

 

А как же HTML5?

HTML5 имеет специальную опцию для таких задач: <progress> и <meter>! Да, но есть некоторые шероховатости. Данные элементы имеют весьма специфический вид. По умолчанию они выглядят как индикатор прогресса на  Mac:

Вы может отключить стиль по умолчанию:

progress {
   -webkit-appearance: none;
}

Так можно удалить глянец, который присутствует по умолчанию. Но вы все еще будете весьма ограниченны в возможностях по изменению элемента. Можно слегка поменять внешний вид следующими командами:

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

...на этом возможности по изменению внешнего вида элемента заканчиваются. Кроме того, внешний вид будет очень сильно различаться в разных браузерах, даже в семействе WebKit. псевдо элементы также несовместимы с таким решением.

Так что на текущий момент решение с парой div/span является очень хорошим вариантом.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/nP5obehtMb4/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Делаем индикатор прогресса с использованием только CSS | | 2012-06-29 06:31:46 | | Статьи Web-мастеру | | В данном уроке мы сделаем индикатор прогресса с использованием только CSS3, никаких изображений. Несмотря на это, дизайн индикатора будет вполне приличный. Впечатление немного портит Opera 11, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: