Для создания прогресс бара понадобиться всего два блока 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);
});
Вот и готово!
jQuery css3 loading & progress bars animated become quite popular lately, and there are lots of plugins that can help you add one to your site. But how do you make one yourself? The problem is that there are plenty of implementations already, so in those tutorials, we are going to code something different – that have built in progress loading bar animation.
This is a collection of loading and progress bar spinners animated with CSS3 jQuery. Each spinner consists of a single div with a class of ‘loader’ and content text of Loading. The text is for screen readers and can be used as a fallback state for older browsers. The aim of this project was to create a set of minimal loading spinners that are visually appealing and also convey their intended meaning.
A strict limit of one element per loader (not including pseudo-elements) was placed on this project based on the belief that something as simple as a loader doesn’t deserve more. Each loader is given a font size in pixels and all other sizes are in ems so to change the size of a loader, just adjust the font-size.
download / more info download
This is an experiment to make an animation for preloader, hope you guys like it.
download / more info download
download / more info download
download / more info download
download / more info download
download / more info download
download / more info download
download / more info download
download / more info download
download / more info download
demo download
They will be perfect for displaying progress while submitting forms or loading content via AJAX. They will also use CSS3 styles and transitions to make them easy to customize.
demo tutorial
A tutorial on how to implement the circular progress concept by Colin Garven. We are using the SVG line drawing animation technique as described by Jake Archibald to animate the circular progress and provide a success and error state to indicate the final status.
demo tutorial
In this quick tip, we will use the new NProgress jQuery plugin to add a progress bar to a web page. If you’d like to learn more, keep reading! NProgress is a jQuery plugin that shows an interactive progress bar on the top of your page, inspired by the one on YouTube. It consists of a global object – NProgress which holds a number of methods that you can call to advance the progress bar.
demo tutorial
pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation. Pace will automatically monitor your Ajax requests, event loop lag, document ready state and elements on your page to decide on the progress.
demo download
ProgressJs is a JavaScript and CSS3 library which helps developers create and manage progress bars for any object on the page. You can design your own template for progress bars or simply customize them.
You can use ProgressJs to show the progress of loading contents (images, videos, etc.) on the page to the users. It can be used on all elements including textboxes, textareas or even the whole body.
demo download
Progress bars are really useful to indicate to user that something happens and when it will be approximately done. They are useful on page where assets should be preloaded before page is shown to user. That’s why is important that progress bar code is light weight so it can be loaded really fast at the start.
demo download / more info
It is 3 simple CSS3 Loading Animations. I remember that CSS3 Loading Animations are only visible in Firefox, Safari and Chrome. What do you wait, start reading!
demo download / more info
It is easy generate tool for creating loading in style.
download / more info
Spin.js dynamically creates spinning activity indicators that can be used as resolution-independent replacement for AJAX loading GIFs
download / more info
download / more info
Sonic is a small (~3k minified) JS “class” you can use to create custom loading animations. It works best with looping animations - i.e. a snake that’s trying to eat its own tail.
Sonic uses the HTML5 element/API. It works by drawing a shape (by default a 6px square) at tiny intervals along a pre-defined path. You can define the path using the functions: arc, bezier and line.
demo download / more info
This plugin allows you to create an animated progress bar using jQuery. Just fill in the required input and the plugin calculates the progress of your goal and animates the bar. You can specify text to put before and after the amount raised.
You are welcome to download the plugin and use it in your personal projects provided that you leave the credits in the source code.
demo download
Progress Button StylesA set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective.
demo tutorial
A Progress Bar implemented entirely using CSS 3 gradients, shadows, and border-radius, with a touch of animation.
download
A JavaScript circular progress widget, dependency-free and configurable.
download / more info
The idea is simple: Add a loading bar / progress bar whenever an XHR request goes out in angular. Multiple requests within the same time period get bundled together such that each response increments the progress bar by the appropriate amount.
This is mostly cool because you simply include it in your app, and it works. There’s no complicated setup, and no need to maintain the state of the loading bar; it’s all handled automatically by the interceptor.
demo download / more info
download / more info
download / more info
download / more info
Just an animated shuriken that can be used as a loading indicator.
download / more info
CSS loading animations are all the rage. Here are some more super simple, yet elegant, styles that take advantage of border-radius and border-style.
download / more info
Playing with CSS-only loading animations. No images used anywhere.
download / more info
As images in the DOM are loaded by the browser, we capture the “load” event and use it to fade in our images with CSS3, hiding the traditional line-by-line loading from the user.
download / more info
download / more info
Some css3 loading animations experiments. Have fun and remember to share what you learn
download / more info
download / more info
download / more info
download / more info
26 frames loading animation using css sprites(single png) and css3 keyframe animation (written in SASS)
download / more info
download / more info
download / more info
download / more info
download / more info
A simple loading system using:after content + CSS3 keyframes animation
download / more info
download / more info
Loading – Animation Css3
download / more info
download / more info
download / more info
download / more info
download / more info
This loading animation is inspired by Facebook’s loading animation. This is written in pure CSS and can be used on any element by adding the class name.
download / more info
download / more info
This tutorial on how to write a CSS3 progress bar and add some cool animation, along with a jQuery counter
download / more info
download / more info
download / more info
download / more info
Skills BarSkills bar using HTML5 progress tag
download / more info
download / more info
download / more info
download / more info
download / more info
download / more info
Real simple Progress bar plugin that relies on css3 for animation. The percent is held in a data attribute.
И снова здравствуйте, сегодня мы будем создавать полосу загрузки или как ее еще называют — 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); }; });
Вот на этом и все!) Просто, не правда ли? Надеюсь данный урок был вам полезен. Удачи!
Перевод: Влад Мержевич
В 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);
Затем внутри переменной добавляем условный оператор.
