В этой статье мы сделаем простую анимацию загрузки с помощь 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>