 |
Категория: Веб-мастерство |
| Название: Индикаторы загрузки с помощью SVG | |
| Дата добавления: 25-07-2012 | |
| Раз просмотрено: 531 | |
| Комментарии: 0 | |
Рейтинг:  (0 голосов) |
Индикаторы загрузки с помощью SVG
Несмотря на то, что последний тренд в веб-разработках заключается в создании элементов сайта без применения изображений, я решил показать вам в этом уроке, как создать анимированный индикатор загрузки с помощью SVG изображения, вместо стандартных CSS блоков и элементов. Мы создадим красивый индикатор загрузки, а задним фоном ему зададим SVG изображение.
Затем мы «оживим» его с помощью CSS анимаций. Этот индикатор загрузки будет нормально отображаться в браузерах, не поддерживающих CSS анимации. SVG отлично и широко поддерживается во всех браузерах, поэтому не волнуйтесь из-за его использования. В результате выполнения этого урока в итоге вы получите вот такие индикаторы загрузки. Демо к ним можно посмотреть на этой странице.
Индикаторы загрузки с помощью SVG
HTML
HTML разметка этих индикаторов загрузки довольно проста и не требует лишних пояснений. Блок с классом bar является главным контейнером для индикатора загрузки, а блок amount — это заполненная часть. Ему мы будем добавлять еще один класс, определяющий цвет, а также задавать ширину с помощью инлайнового стиля. В этом блоке у нас находится блок для процентов loaded и блок для диагональных линий lines, которые мы потом анимируем.
<div class="bar">
<div class="amount green" style="width: 40%;">
<div class="loaded">40%</div>
<div class="lines"></div>
</div>
</div>
CSS
Теперь, стилизуем наши индикаторы загрузки. Блок с классом bar будет иметь фиксированную ширину, в то время как контейнер amount будет иметь ширину в процентах от своего родителя. Изменяя ее мы создадим разные стадии загрузки.
.bar {
width: 500px;
height: 61px;
border-radius: 5px;
background-color: #282F32;
padding: 4px 5px;
box-shadow: inset 3px 0px 10px rgba(0, 0, 0, 0.1);
}
.amount {
height: 60px;
border-radius: 5px;
white-space: nowrap;
overflow: hidden;
margin-top: -9px;
}
Следующий в очереди блок с классом lines. Самое интересное здесь, то что мы будем использовать SVG изображение в качестве его фона. Мы создадим это изображение, после того, как закончим часть с CSS. Также, к этому классу мы применим анимацию. Если браузер пользователя ее не поддерживает, это не сильно испортит вид этих индикаторов загрузки. Также в этой части, мы стилизуем блок с процентами загрузки loaded.
.lines {
width: 200%;
background: url('lines.svg') repeat-x;
height: 120%;
text-align: center;
margin-top: -35px;
overflow: hidden;
border-radius: 50px;
font-weight: bold;
color: #FFF;
font-size: 18px;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-webkit-animation: move 1s linear infinite;
-moz-animation: move 1s linear infinite;
-ms-animation: move 1s linear infinite;
-o-animation: move 1s linear infinite;
animation: move 1s linear infinite;
}
.loaded {
text-align: center;
font-family: Helvetica, sans-serif;
font-weight: bold;
position: relative;
top: 14px;
font-size: 30px;
text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
color: #FFF;
z-index: 9999;
}
Цвета
Чтобы описать цвет этих индикаторов загрузки, нужна задать им задний фон, а также внутреннюю тень. В этой части CSS кода описываются три цвета для индикаторов загрузки: красный, зеленый и синий. Вы можете изменить их, или добавить свои цвета. Помните, что класс с цветом следует добавлять блоку с классом amount.
.red {
background-color: #DC6565;
box-shadow: inset 0px 4px 40px rgba(255, 255, 255, 0.2), 0 10px 10px -5px #D23333, 0 7px 0 #8C1212;
}
.green {
background-color: #8AC320;
box-shadow: inset 0px 4px 40px rgba(255, 255, 255, 0.2), 0 10px 10px -5px #79AA1E , 0 7px 0 #628C14;
}
.blue {
background-color: #20B9C3;
box-shadow: inset 0px 4px 40px rgba(255, 255, 255, 0.2), 0 10px 10px -5px #1E8AAA, 0 7px 0 #13768C;
}
Анимация
B наконец, анимация. Все, что мы будем делать — это сдвигать блок lines на 180 пикселей влево. Обычно, анимации занимают очень много места в CSS файле, из-за браузерных преффиксов. Но в нашем случае, вся анимация уложена в пять строчек кода:
@-webkit-keyframes move { 100% { margin-left: -180px; } }
@-moz-keyframes move { 100% { margin-left: -180px; } }
@-ms-keyframes move { 100% { margin-left: -180px; } }
@-o-keyframes move { 100% { margin-left: -180px; } }
@keyframes move { 100% { margin-left: -180px; } }
SVG
SVG — это довольно недооцененная технология в мире веб-строительства. В SVG вы можете создавать любую векторную форму, а также использовать CSS стили. Подробнее об SVG вы можете почитать в статье «SVG на сайтах». Мы можем вставлять SVG на страницу, как обычное изображение, либо использовать в качестве фона. В этом уроке мы будем действовать именно так.
Главная причина использования SVG в нашем случае — это не совсем корректная работа WebKit браузеров и Opera при использовании свойств border-radius и overflow. Если вы используете прозрачность, скругление углов и относительное позиционирование или вращаете элемент с помощью CSS, содержимое выйдет за границы блока. Вторая причина заключается в том, что в старых браузерах этот метод будет выглядеть гораздо лучше, чем повернутые блоки вместо линий. Вот содержимое нашего SVG изображения:
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="180"> <polygon fill="white" opacity="0.2" points="90,0 180,0 90,180 0,180" /> </svg>
Первая линия этого файла напоминает объявление типа HTML документа. Затем мы рисуем многоугольник, задавая его координаты, заливаем его белым цветом и задаем ему непрозрачность в 0.2 единицы. Сохраните этот файл под именем lines.svg в той же директории, где находится ваш CSS код.
Вот и все. Теперь вы получили очень привлекательные индикаторы загрузки при помощи некоторых CSS свойств и малоизвестного приема в виде задания задним фоном SVG изображения.
Это интересно: «Распространенные ошибки новичков в CSS».
Ваш комментарий будет первым.