Сразу отметим, что здесь нет изображений, а лишь возможности CSS3! Так как создатель является профессиональным дизайнером, он также учёл и функцию отката для более старых версий браузеров. Вот так полосы выглядят в Opera 11, который поддерживает лишь некоторые параметры CSS3, но не все.
Вероятно, вы и сами уже догадались, что в браузерах, где совсем нет поддержки CSS3, полосы выглядят примерно так же, но ещё более упрощенно.
Основа HTML
Сама полоса представляет собой div с классом. Внутри него мы разместим span, который будет действовать в качестве «заполненной» области полосы прогресса. Этого можно добиться посредством строчной стилизации. Здесь нам нужно, чтобы полоса понимала, насколько она должна быть заполнена, и именно в таких случаях применяются строчные элементы. Альтернативным вариантом CSS будут классы, типа «fill-10-percent», «fill-one-third» и так далее.
Основа:
Начало CSS
Оболочка div’а – это и есть указатель прогресса в нашей полосе. Нам не надо задавать параметр ширины для того, чтобы она простиралась на всю ширину родительского блочного элемента. Хотя, вы можете и задать параметр. Параметр высоты также произвольный. Он выставлен на 20 пикселей, но вы можете поставить на своё усмотрение. Далее мы закруглим углы во всех браузерах, в которых это возможно, и выставим внутреннюю тень для того, чтобы придать эффект глубины.
Meter {
height: 20px; /* Can be anything */
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-
-webkit-
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
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:
-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» к оболочке div’а и цвет будет изменен.
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’а, и задав ему повторяющуюся CSS-градацию. Касательно семантики, это лучше всего реализовать посредством псевдо-элемента, поэтому давайте так и сделаем. Мы зададим ему абсолютную позицию над конкретной областью нашего 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;
-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 задачу анимировать его.
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;
}
Возможно, стоит оставить привязку анимации и к псевдо-элементу, чтобы она заработала, как только браузеры Webkit начнут поддерживать эту функцию.
Анимация заполненной ширины
К сожалению, вы НЕ СМОЖЕТЕ анимировать элемент при автоматической или натуральной ширине, что вероятно даёт возможность анимации строчных элементов.
@-webkit-animation expandWidth {
0% { width: 0; }
100% { width: auto; }
}
Автор адаптировал элемент для баг-трэкеров всех популярных браузеров, но в данный момент это не поддерживается. Вместо этого, давайте воспользуемся jQuery. Установите оригинальную ширину, принудительно уменьшите её до нуля, а затем анимируйте:
$(".meter > span").each(function() {
$(this)
.data("origWidth", $(this).width())
.width(0)
.animate({
width: $(this).data("origWidth")
}, 1200);
});
Вот и готово!
Перевод: Влад Мержевич
В HTML5 добавлен элемент для индикатора выполнения, который позволяет показывать прогресс выполнения определённых задач вроде скачивания или загрузки, в основном всё, что занимает некоторое время.
В этой статье мы обсудим, как добавить этот элемент в документ, задать ему стиль через CSS и сделать анимацию прогресса.
Давайте начнём.
Основы использованияИндикатор добавляется тегом ; значение прогресса определяется атрибутами value , min и max следующим образом.
Поскольку речь идёт о встроенном индикаторе, его вид варьируется в зависимости от платформы. Ниже показано, как встроенный индикатор выглядит в Windows и OS X.
Давайте теперь попробуем стилизовать этот элемент, чтобы он выглядел одинаково на всех платформах.
Стилизация индикатора выполненияВ таблице стилей мы можем использовать селектор progress для добавления стилевых правил к элементу В данном примере мы меняем цвет фона, убираем границу и сделаем скругление, задав радиус в половину высоты.
Progress { background-color: #f3f3f3; border: 0; height: 18px; border-radius: 9px; }
Тем не менее, в браузерах имеются небольшие отличия. В Firefox стили применяются к самому индикатору, в то время как стиль бегунка не меняется.
В Chrome и Safari исходные стили убираются и заменяются на , так что стиль выше не применяется (по крайней мере, на данный момент).
Итак, нам нужно что-то ещё в таком случае.
В Chrome и Safari элемент Расшифровывается следующим образом.
┗ ::-webkit-progress-bar ┗ ::-webkit-progress-value
Таким образом, чтобы изменить стиль индикатора выполнения и бегунка в этих браузерах, мы должны добавить такие псевдоклассы.
Progress::-webkit-progress-bar { /* стилевые правила */ } progress::-webkit-progress-value { /* стилевые правила */ }
У Firefox также есть специальный псевдокласс ::-moz-progress-bar . В отличие от Chrome и Safari, этот псевдокласс в Firefox относится к бегунку.
Progress::-moz-progress-bar { /* стилевые правила */ }
Окончательно собираем эти селекторы вместе для стилизации индикатора выполнения.
Progress { /* стилевые правила */ } progress::-webkit-progress-bar { /* стилевые правила */ } progress::-webkit-progress-value { /* стилевые правила */ } progress::-moz-progress-bar { /* стилевые правила */ }
Анимация прогрессаДалее мы увидим как анимировать индикатор. Как правило, бегунок растёт слева направо по мере прогресса задачи. Идея состоит в том, бегунок будет расти от 0 и остановится, как только достигнет максимального значения. Будем также отображать значение числа по мере продвижения бегунка. Ниже приводится структура HTML.
В данном примере для анимации индикатора мы будем использовать jQuery, так что не забудьте вставить jQuery таким образом.
Затем мы добавим скрипт для увеличения прогресса. Вначале сохраним в переменных сам элемент, максимальное и текущее значение и период времени.
Var progressbar = $("#progressbar"), max = progressbar.attr("max"), value = progressbar.val(), time = (1000/max)*5;
Затем создаём переменную, которая хранит функцию анимации. В этом примере она называется .
Внутри данной функции устанавливаем значение приращения. Будем увеличивать значение на 1 за каждый период времени - вы можете повысить это число, чтобы бегунок двигался быстрее.
Value += 1;
Затем добавим полученный результат в индикатор.
AddValue = progressbar.val(value);
И показываем значение рядом с индикатором выполнения.
$(".progress-value").html(value + "%");
В этот момент анимация уже действует, однако значение будет расти бесконечно. Итак, нужно создать условный оператор для анимации чтобы остановиться, когда анимация достигнет максимального значения.
Сохраним вышеприведённую функцию в переменной.
Var animate = setInterval(function() { loading(); }, time);
Затем внутри переменной добавляем условный оператор.
Для создания прогресс бара понадобиться всего два блока DIV и соответствующие стили для них, причем один блок будет вложен в другой, заполняя его другим цветом именно настолько процентов, насколько завершена текущая операция (текущее событие).
Стили блоков прогресс бара:
Обратите внимания, что в HTML коде используется также стиль указывающий ширину вложенного блока style=»width:75px» именно этот стиль указывает то количество процентов, на которое будет заполнен основной блок. Это удобно еще и тем, что если страница генерируется например PHP, то вы можете вставлять любое значение длины внутреннего блока.
Также внутри основного блока мы можем написать любой текст, это может быть статус в процентах, или пояснение к прогресс бару. Чего не сделаешь при использовании картинок.
В итоге
мы имеем универсальный прогресс бар, работающий во всех современных браузерах, а так же в стареньком ослике IE6. Можем задавать ему любой цвет, размер и описание.
JQuery – это библиотека JavaScript , которая позволяет очень просто создавать такие элементы интерфейсов, как прогресс-бары, выпадающие списки и т.д.
В этой статье вы найдете ссылки на скачивание JavaScript и JQuery скриптов, которые могут быть использованы на вашем сайте для отображения прогресса загрузки, скачивания файлов или любых других задач. Все описанные ниже скрипты являются абсолютно бесплатными для скачивания.
JQuery и JavaScript могут не поддерживаться старыми браузерами, но все современные браузеры полностью поддерживают их.
Checkout Progress BarАдаптивный CSS прогресс-бар с красивым интерфейсом пяти шагов оплаты и подписки.
Скачать
Pixel Progress BarНебольшой декоративный индикатор в виде квадратных пикселей на конце полосы прогресса делает этот прогресс-бар визуально гораздо более привлекательным.
Скачать
Автоматический прогресс бар веб-страницы. Включите pace.js и тему по своему выбору в свою страницу, и все готово! Pace будет автоматически отслеживать Ajax запросы, задержку цикла событий, состояние готовности документа и элементы на странице, чтобы уведомлять о прогрессе выполнения задачи.
Демо |Скачать
Они идеально подходят для отображения прогресса выполнения задачи при выводе формы или загрузке контента через AJAX . Они также могут использовать стили и переходы CSS3 , что делает их простыми в настройке.
Демо |Скачать
Этот плагин позволяет создавать анимированные прогресс-бары на основе JQuery . Просто заполните необходимые данные, и плагин сам вычислит прогресс выполнения задачи и задаст соответствующую анимацию панели. Вы можете указать текст, который будет выводиться перед и после достижения определенного процента выполнения задачи.
Демо |Скачать
Набор плоских и 3D стилей кнопок прогресса, где сама кнопка служит индикатором прогресса. 3D -стили используются для отображения прогресса задачи на одной стороне при вращении кнопки.
Демо |Скачать
ProgressJs — это библиотека на основе JavaScript и CSS3 , которая помогает разработчикам создавать и управлять прогресс-барами для каждого объекта на странице.
Демо
|Скачать
ngProgress — используется для вывода статуса загрузки чего-либо. Данный элемент может использоваться для индикации извлечения данных с внешних ресурсов, если выполнение занимает больше времени, чем обычно или при простой загрузке страниц. Преимущественно применятся для вывода статуса загрузки больших по объему файлов.
Демо |Скачать
Данный прогресс-бар полностью реализован с помощью градиентов, теней и границ-радиусов CSS3 с примесью анимации. Целью данного проекта является демонстрация возможностей CSS3 в современных веб-браузерах. Поэтому стили этого прогресс-бара задаются исключительно с помощью CSS .
Демо |Скачать
«Наноскопический » прогресс-бар. С помощью реалистичных эффектов анимации, вы показываете пользователям, что выполняется какая-то задача! Вдохновение автора черпали в среде Google , YouTube .
Скачать
Круговой JavaScript -виджет прогресса, очень прост в реализации и настройке.
Скачать
Очень, очень компактный прогресс-бар (архив размером всего 730 байт ). Не требует установки JQuery .
Демо |Скачать
Идея проста: добавлять прогресс-бар загрузки всякий раз, когда выполняется XHR -запрос. Несколько запросов, выполняемых одновременно, могут собираться в одной панели таким образом, что каждый ответ соответственно увеличивает прогресс-бар.
Демо |Скачать
jQuery.PercentageLoader — это JQuery -плагин для визуализации более привлекательного прогресс-бара, чем обычный горизонтальный индикатор и текстовый счетчик. Плагин прост в установке и довольно гибок в использовании. Он использует холсты HTML5 , что позволяет создавать впечатляющее графическое представление, используя для этого всего лишь 10-килобитный (минимизированный ) Javascript -файл (с приложением веб-шрифтов опционально ).
Плагин использует векторы, а не изображения, что позволяет легко разворачивать различные элементы простым редактированием начальных параметров.
Демо |Скачать
Circular Progress Bar предоставляет неограниченные возможности для индикации потоков выгрузки или загрузки данных.
Демо / Скачать
Этот прогресс-бар использует атрибут HTML5 custom data-* , что позволяет просто дополнять анимацией прогресс-бар с помощью Zepto (или JQuery ). Анимация упаковывается в функцию window.resize , чтобы запускать ее снова, если размер окна браузера изменяется.
Демо |Скачать
5-этапный CSS прогресс-бар. JS используется только для анимации демо-версии.
Демо |Скачать
Использует элементы прогресса выполнения при заполнении профиля. Добавляет соответствующие кнопки для отображения заполнения всех необходимых данных; пользователь может нажимать кнопки «Сохранить «, «Далее » при выполнении соответствующих действий.
Сразу отметим, что здесь нет изображений, а лишь возможности CSS3! Так как создатель является профессиональным дизайнером, он также учёл и функцию отката для более старых версий браузеров. Вот так полосы выглядят в Opera 11, который поддерживает лишь некоторые параметры CSS3, но не все.
Вероятно, вы и сами уже догадались, что в браузерах, где совсем нет поддержки CSS3, полосы выглядят примерно так же, но ещё более упрощенно.
Основа HTML
Сама полоса представляет собой div с классом. Внутри него мы разместим span, который будет действовать в качестве «заполненной» области полосы прогресса. Этого можно добиться посредством строчной стилизации. Здесь нам нужно, чтобы полоса понимала, насколько она должна быть заполнена, и именно в таких случаях применяются строчные элементы. Альтернативным вариантом CSS будут классы, типа «fill-10-percent», «fill-one-third» и так далее.
Основа:
Начало CSS
Оболочка div’а – это и есть указатель прогресса в нашей полосе. Нам не надо задавать параметр ширины для того, чтобы она простиралась на всю ширину родительского блочного элемента. Хотя, вы можете и задать параметр. Параметр высоты также произвольный. Он выставлен на 20 пикселей, но вы можете поставить на своё усмотрение. Далее мы закруглим углы во всех браузерах, в которых это возможно, и выставим внутреннюю тень для того, чтобы придать эффект глубины.
Meter { height: 20px; /* Can be anything */ 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» к оболочке div’а и цвет будет изменен. .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’а, и задав ему повторяющуюся CSS-градацию. Касательно семантики, это лучше всего реализовать посредством псевдо-элемента, поэтому давайте так и сделаем. Мы зададим ему абсолютную позицию над конкретной областью нашего 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 задачу анимировать его.
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; }
Возможно, стоит оставить привязку анимации и к псевдо-элементу, чтобы она заработала, как только браузеры Webkit начнут поддерживать эту функцию.
Анимация заполненной ширины
К сожалению, вы НЕ СМОЖЕТЕ анимировать элемент при автоматической или натуральной ширине, что вероятно даёт возможность анимации строчных элементов.
@-webkit-animation expandWidth { 0% { width: 0; } 100% { width: auto; } }
Автор адаптировал элемент для баг-трэкеров всех популярных браузеров, но в данный момент это не поддерживается. Вместо этого, давайте воспользуемся jQuery. Установите оригинальную ширину, принудительно уменьшите её до нуля, а затем анимируйте:
$(".meter > span").each(function() { $(this) .data("origWidth", $(this).width()) .width(0) .animate({ width: $(this).data("origWidth") }, 1200); });
Вот и готово!
