Автор

18 04.2013
Индикатор процесса с помощью 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;}
 }

 

 

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

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

 

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

 

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


vk.com/club.ssdru

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


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

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

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


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

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


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

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


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

Скорее всего, нет веб-проекта, который не связан с созданием всплывающего сообщения: является ли это подтверждением удаления элемента или добавления элемента в корзину, всплывающие сообщения всегда являются частью сайта.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close