Поиск
Подписаться
Разное

Валидный XHTML 1.0 Transitional

Валидный RSS

Индикаторы загрузки с помощью SVG Категория: Веб-мастерство
Название: Индикаторы загрузки с помощью SVG
Дата добавления: 25-07-2012
Раз просмотрено: 531
Комментарии: 0
Рейтинг: · · · · · · · · · · (0 голосов)

Индикаторы загрузки с помощью SVG

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

Затем мы «оживим» его с помощью CSS анимаций. Этот индикатор загрузки будет нормально отображаться в браузерах, не поддерживающих CSS анимации. SVG отлично и широко поддерживается во всех браузерах, поэтому не волнуйтесь из-за его использования. В результате выполнения этого урока в итоге вы получите вот такие индикаторы загрузки. Демо к ним можно посмотреть на этой странице.

Индикаторы загрузки с помощью 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».

Понравился материал? Расскажи о нем всем:
Оцените эту статью:
Прокомментируйте:
Ваше имя:

Ваш комментарий будет первым.