И снова здравствуйте, сегодня мы будем создавать полосу загрузки или как ее еще называют — progressbar . А создавать мы его будем одним из самых простых методов, используя HTML5. По сути сам прогресс бар можно применять везде где нужен индикатор завершенности какой-нибудь операции в процентах (в опросах, построении графиков и прочее). При помощи CSS3 не составит сложности его оформить по собственному желанию. И в нашем случае нет необходимости использовать изображения, что, несомненно, является большим плюсом.
В HTML5 есть тег Который значительно облегчит нам жизнь при создании прогресс бара . Он имеет атрибут min, max и value. Чтобы он появился на странице, необходимо написать следующее:
Когда вы вставите вышеприведенный код в HTML, то увидите прогресс бар, который отображается по умолчанию и с базовыми стилями.
Если вы пользовались различными операционными системами, то могли заметить, что прогресс бары в них отличаются.
А сейчас присвоим собственные стили нашему прогресс бару. В качестве селектора в CSS файле мы будем использовать сам тег progress:
Progress { background-color: #f3f3f3; border: 0; width: 80%; height: 18px; border-radius: 9px; }
Например, вышеприведенный код убирает границу у прогресс бара и фон делает серым.
Сейчас начнутся проблемы)
Исторически случилось так, что для разных браузеров - разные селекторы. Поэтому, чтобы правильно отображался прогресс бар в разных браузерах, необходимо использовать псевдо-селекторы, предназначенные специально для конкретного браузера.
Для Safari и Chrome:
Progress::-webkit-progress-bar { /* ваши стили */ } progress::-webkit-progress-value { /* ваши стили */ }
Progress::-moz-progress-bar { /* ваши стили */ }
HTML
Следующим шагом будет создание анимации прогресс бара. Итак, прогресс бар заполняется слева направо. То есть начинается когда value="0" и заканчивается когда value="максимум". В качестве примера возьмем следующий код:
jQuery
Для анимации прогресс бара будем использовать библиотеку jQuery, поэтому ее необходимо сначала подключить:
Далее пишем скрипт, который по сути и будет заполнять наш прогрес бар. В первой строке мы определяем тот элемент, который будет заполняться(это и есть прогресс бар), во второй получаем максимум прогресс бара из атрибута max:
Var progressbar = $("#progressbar"), max = progressbar.attr("max"), value = progressbar.val(), time = (1000/max)*5;
Внутри данной функции мы будем увеличивать заполнение прогресс бара на одну единицу.
А затем присваивать атрибуту value увеличенное значение. Также мы будем показывать процент загрузки рядом с прогресс баром:
Value += 1; addValue = progressbar.val(value); $(".progress-value").html(value + "%");
Затем нам нужна функция, которая запустит функцию анимации загрузки:
На данный момент анимация загрузки работает, но значения будут увеличиваться до бесконечности. Поэтому необходимо создать условия, при котором анимация остановиться, когда прогресс бар полностью заполнится, то есть достигнет максимума.
Будем хранить результат функции в переменной. А внутри функции loading напишем условие:
Var animate = setInterval(function() { loading(); }, time); if (value == max) { clearInterval(animate); }
Весь код:
$(document).ready(function() { if(!Modernizr.meter){ alert("Извините, но Ваш браузер не поддерживает HTML5 прогресс бар!"); } else { var progressbar = $("#progressbar"), max = progressbar.attr("max"), time = (1000/max)*5, value = progressbar.val(); var loading = function() { value += 1; addValue = progressbar.val(value); $(".progress-value").html(value + "%"); if (value == max) { clearInterval(animate); } }; var animate = setInterval(function() { loading(); }, time); }; });
Вот на этом и все!) Просто, не правда ли? Надеюсь данный урок был вам полезен. Удачи!
12.05.15 18.8KJQuery – это библиотека 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 используется только для анимации демо-версии.
Демо |Скачать
Использует элементы прогресса выполнения при заполнении профиля. Добавляет соответствующие кнопки для отображения заполнения всех необходимых данных; пользователь может нажимать кнопки «Сохранить «, «Далее » при выполнении соответствующих действий.
Для создания прогресс бара понадобиться всего два блока DIV и соответствующие стили для них, причем один блок будет вложен в другой, заполняя его другим цветом именно настолько процентов, насколько завершена текущая операция (текущее событие).
Стили блоков прогресс бара:
Обратите внимания, что в HTML коде используется также стиль указывающий ширину вложенного блока style=»width:75px» именно этот стиль указывает то количество процентов, на которое будет заполнен основной блок. Это удобно еще и тем, что если страница генерируется например PHP, то вы можете вставлять любое значение длины внутреннего блока.
Также внутри основного блока мы можем написать любой текст, это может быть статус в процентах, или пояснение к прогресс бару. Чего не сделаешь при использовании картинок.
В итоге
мы имеем универсальный прогресс бар, работающий во всех современных браузерах, а так же в стареньком ослике IE6. Можем задавать ему любой цвет, размер и описание.
Сразу отметим, что здесь нет изображений, а лишь возможности 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 задачу анимировать его.
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);
});
Вот и готово!
