Webmasters.BY

Главная Статьи Верстка сайтов Создаем индикатор прогресса при помощи CSS3
Создаем индикатор прогресса при помощи CSS3
Рейтинг пользователей: / 4
ХудшийЛучший 
28.11.2011 00:00

css3 progress bars

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

В этой статье вы узнаете, как создать стильный и анимированный индикатор прогресса при помощи CSS3.

Онлайн-демо

HTML

Разметка проще некуда:

<div class="progress-bar blue stripes">
 <span style="width: 40%"></span>
</div>

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

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

css3 progress bar default

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

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

css3 progress bar stripes

Анимация:

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

В этом примере индикатор прогресса использует  псевдо-элемент CSS3 ::after, который и используется для создания анимации. В настоящее время анимация полос видна только в последних версиях браузера Firefox. Я надеюсь, что скоро она будет поддерживаться и другими браузерами.

css3 progress bar shine

Свечение

Для подсветки мы используем CSS3 keyframes animation, основываясь на свойстве box-shadow:

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

css3 progress bar glow

Онлайн-демо

А что же в старых браузерах?

progress bars в старых браузерах

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

Перевод

P.S. Для создания индикатора загрузки можно воспользоваться сервисом cssload.net.

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


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

Если вы заметили ошибку в тексте новости, пожалуйста, выделите её и нажмите Ctrl+Enter

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Обновлено 28.11.2011 13:43
 

Апельсин-1

Голосование

Ваш любимый html-редактор?

Новые файлы

Шпаргалка по HTML5 Canvas

Archive - бесплатный кириллический шрифт

Шпаргалка по HTML5 атрибутам обработчиков событий

См. также

activecloud.ru

TisRef

Баннер

Видеоуроки

Система Orphus

Кто онлайн

Сейчас 45 гостей онлайн

Комментарии

Статистика
Webmasters.BY © 2008 - 2012