Простая анимации загрузки с помощь SVG в HTML.

В этой статье мы сделаем простую анимацию загрузки с помощь HTML и тега <svg> . Это может быть и маленькая иконка и какой нибудь прелоад или еще что нибудь. Не судите строго, это можно сказать первые шаги. Надеюсь новичкам пригодиться.

Что такое SVG.

  • SVG(Scalable Vector Graphic) — это язык для описания двумерной графики, основанный на XML , расшифровывается как масштабируемая векторная графика.
  • Можно редактировать или анимировать с помощью CSS и JavaScript .
  • Можно стилизовать объекты с помощью CSS, как обычные html элементы, или с помощью JavaScript .

Элемент HTML <svg> является контейнером для графики SVG. SVG имеет несколько методов рисования контуров, прямоугольников, кругов, текста и графических изображений.

В нашем примере я буду использовать как раз метод рисования прямоугольников. Давайте разберем кусок кода анимации :

<svg width="240" height="300" fill="#a30808">
   <rect width="10%"  x="25%" rx="5%" ry="5%">
	<animate attributeName= "height" values="20%; 70%; 20%" dur="0.7s" begin="0.15s" repeatCount="indefinite"/>
	<animate attributeName= "y" values="40%; 15%; 40%;" dur="0.7s" begin="0.15s" repeatCount="indefinite"/>
    </rect> 

Первый не очень понятное свойства у нас fill="#a30808"fill заливка элемента.

Далее у нас идет тег <rect> — это базовая SVG фигура, используется для отрисовки прямоугольников по координатам угла, длины и высоты прямоугольника. Также может использоваться для отрисовки прямоугольников со скругленными углами.

Свойства

  • width="10%" — ширина 10 % пикселей.
  • x="25%" — позиция левого верхнего угла по координате Х.
  • rx="5%" ry="5%" — скругление краев по X и Y координатам.
  • y="5px" — позиция по координатам Y.
  • height="300px" — высота 300 пикселей.

Следующий тег <animate> — позволяет задать анимацию для скалярных атрибутов и свойств на определенный промежуток времени.

СВОЙСТВА

  • attributeName= "height" — атрибут значение которого будем менять.
  • values="20%; 70%; 20%" — значения свойства указанного в attributeName .
  • dur="0.7s" — значение атрибута определяет длительность анимации, которое можно указывать как в секундах, так и в миллисекундах.
  • begin="0.15s" — отвечает он за то, когда начнется анимация. Этот атрибут очень полезен, потому что также используется для синхронизации нескольких анимаций.
  • repeatCount="indefinite" — атрибут определяет число повторений анимации и по умолчанию имеет 1, но можно указать любое число. indefinite бесконечно.

Код страницы.

Конечно это не все возможности SVG. Но для нашего простого примера их вполне достаточно.

<!DOCTYPE html>
<html lang="ru">	
<head>
	<meta charset="UTF-8">
	<title> SVG </title>
	<style>
		body {
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height : 100vh;
			background-color: #000000; }
	</style>
</head>
<body>
	<svg width="240" height="300" fill="#a30808">
		<rect width="10%"  x="5%" rx="5%" ry="5%">
			<animate attributeName= "height" values="20%; 70%; 20%" dur="0.7s" repeatCount="indefinite"/>
			<animate attributeName= "y" values="40%; 15%; 40%;" dur="0.7s" repeatCount="indefinite"/>
		</rect> 
		<rect width="10%"  x="25%" rx="5%" ry="5%">
			<animate attributeName= "height" values="20%; 70%; 20%" dur="0.7s" begin="0.15s" repeatCount="indefinite"/>
			<animate attributeName= "y" values="40%; 15%; 40%;" dur="0.7s" begin="0.15s" repeatCount="indefinite"/>
		</rect> 
		<rect width="10%"  x="45%" rx="5%" ry="5%">
			<animate attributeName= "height" values="20%; 70%; 20%" dur="0.7s" begin="0.3s" repeatCount="indefinite"/>
			<animate attributeName= "y" values="40%; 15%; 40%;" dur="0.7s" begin="0.3s" repeatCount="indefinite"/>
		</rect> 
		<rect width="10%"  x="65%" rx="5%" ry="5%">
			<animate attributeName= "height" values="20%; 70%; 20%" dur="0.7s" begin="0.45s" repeatCount="indefinite"/>
			<animate attributeName= "y" values="40%; 15%; 40%;" dur="0.7s" begin="0.45s" repeatCount="indefinite"/>
		</rect> 
		<rect width="10%"  x="85%" rx="5%" ry="5%">
			<animate attributeName= "height" values="20%; 70%; 20%" dur="0.7s" begin="0.6s" repeatCount="indefinite"/>
			<animate attributeName= "y" values="40%; 15%; 40%;" dur="0.7s" begin="0.6s" repeatCount="indefinite"/>
		</rect> 
	</svg>
</body>
</html>