Автор

Индикатор процесса с помощью CSS3

Индикатор процесса с помощью CSS3


 

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

 

ДЕМО
ИСХОДНИКИ

 

Разметка HTML

 

<div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>
<p>Установить на :
    <a href="#" class="quarter">25%</a> /
    <a href="#" class="half">50%</a> /
    <a href="#" class="three-quarters">75%</a> /
    <a href="#" class="full">100%</a>
</p>

<div class="progress-bar orange shine">
    <span style="width: 65%"></span>
</div>
<p>Установить на :
    <a href="#" class="quarter">25%</a> /
    <a href="#" class="half">50%</a> /
    <a href="#" class="three-quarters">75%</a> /
    <a href="#" class="full">100%</a>
</p>

<div class="progress-bar green glow">
    <span style="width: 55%"></span>
</div>
<p>Установить на :
    <a href="#" class="quarter">25%</a> /
    <a href="#" class="half">50%</a> /
    <a href="#" class="three-quarters">75%</a> /
    <a href="#" class="full">100%</a>
</p>

 

Вот некоторые параметры которые могут быть полезны:

.progress-bar – определяет общий стиль нашего индикатора прогресса;
.blue – определяет стиль CSS, в данном случае используется набор правил для голубого стиля;
.stripes – тип анимации для индикатора прогресса;
span – данный элемент помогает заполнять индикатор прогресса. Встроенный стиль widthопределяет степень заполнения.

Теперь рассмотри сами стили CSS, для индикатора процесса:

.progress-bar {
        background-color: #1a1a1a;
        height: 25px;
        padding: 5px;
        width: 350px;
        margin: 50px 0;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
        -webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
        box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}

.progress-bar span {
        display: inline-block;
        height: 25px;
        width: 200px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
        -webkit-transition: width .4s ease-in-out;
        -moz-transition: width .4s ease-in-out;
        -ms-transition: width .4s ease-in-out;
        -o-transition: width .4s ease-in-out;
        transition: width .4s ease-in-out;
}

Вот что у нас получается:

Добавим цвета и градиенты:

.blue span {
        background-color: #34c2e3;
}

.orange span {
          background-color: #fecf23;
          background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
          background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
          background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
          background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
          background-image: -o-linear-gradient(top, #fecf23, #fd9215);
          background-image: linear-gradient(top, #fecf23, #fd9215);
}

.green span {
          background-color: #a5df41;
          background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
          background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
          background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
          background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
          background-image: -o-linear-gradient(top, #a5df41, #4ca916);
          background-image: linear-gradient(top, #a5df41, #4ca916);
}

Теперь определим полоски:

.stripes span {
        -webkit-background-size: 30px 30px;
        -moz-background-size: 30px 30px;
        background-size: 30px 30px;
        background-image: -webkit-gradient(linear, left top, right bottom,
  color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
   color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
   color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
   to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
        -webkit-animation: animate-stripes 3s linear infinite;
        -moz-animation: animate-stripes 3s linear infinite;
}

@-webkit-keyframes animate-stripes {
        0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

@-moz-keyframes animate-stripes {
        0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}

 

 

Добавим глянец:

.shine span {
        position: relative;
}

.shine span::after {
        content: '';
        opacity: 0;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #fff;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;

        -webkit-animation: animate-shine 2s ease-out infinite;
        -moz-animation: animate-shine 2s ease-out infinite;
}

@-webkit-keyframes animate-shine {
        0% {opacity: 0; width: 0;}
        50% {opacity: .5;}
        100% {opacity: 0; width: 95%;}
}

@-moz-keyframes animate-shine {
        0% {opacity: 0; width: 0;}
        50% {opacity: .5;}
        100% {opacity: 0; width: 95%;}
}

 

 

И последним будет свечение:

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

        -webkit-animation: animate-glow 1s ease-out infinite;
        -moz-animation: animate-glow 1s ease-out infinite;
}

@-webkit-keyframes animate-glow {
 0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
 100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 }

@-moz-keyframes animate-glow {
 0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
 100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
 }

 

 

Индикатор сохраняет свою работоспособность, но теряет внешний блеск.

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

 

Статей в блоге 386

 

Вот на этом все. Удачных Вам экспериментов. Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

Индикатор процесса с помощью CSS3

С помощью подобного календаря, например, можно вести собственный дневник в Интернете или напоминать Вашим посетителям о каких-либо важных датах. Если его немного доработать, можно сделать интересное решение с автоматическим добавлением событий.

Лично я применил календарь на сайте Усадьба «Сказка» по просьбе заказчика!


Индикатор процесса с помощью CSS3

Еще одна полезная для сайтов вещь - вставка текущей даты. Примеров скриптов даты можно найти в интернете десятки, однако многие из них, на мой взгляд, тяжеловесны и, следовательно, некрасивы. Между тем, используя стандартные средства JavaScript, вставить дату на страницу сайта можно очень просто. Я его очень часто применяю! На картинке (скриншот с действующего сайта)  усадьбы «Сказка»!


Индикатор процесса с помощью CSS3

Простой шаблон для демонстрации возможностей вашего приложения с помощью плавной 3d-анимации, основанной на CSS и jQuery.


Индикатор процесса с помощью CSS3

Сегодняшний пример - это простой шаблон. На больших устройствах контент разделяется на два основных контейнера.


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close