SVG-анимации загрузки часто строятся вокруг идеи постепенного отрисовывания контуров, создания ощущения живого процесса и визуальной обратной связи без использования растровых изображений. Библиотека Vivus позволяет управлять анимацией обводки SVG-путей, что делает её удобным инструментом для построения индикаторов загрузки, основанных на линиях, логотипах и векторных формах.
Основной принцип работы Vivus заключается в управлении свойствами stroke-dasharray и stroke-dashoffset, за счёт которых создаётся эффект «рисования» SVG-элемента. Каждый путь внутри SVG может быть анимирован независимо или в составе общей последовательности, что позволяет формировать разнообразные сценарии появления графики.
Индикаторы загрузки на основе Vivus почти всегда начинаются с подготовленного SVG, в котором важна чистота контуров и отсутствие заливки, если требуется эффект прорисовки линий.
<svg id="loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path d="M50 100 L150 100" stroke="#333" fill="none" stroke-width="4"/>
<path d="M100 50 L100 150" stroke="#333" fill="none" stroke-width="4"/>
</svg>Каждый path должен быть оптимизирован, так как Vivus
работает именно с геометрией путей. Чем сложнее структура SVG, тем более
выраженным становится эффект последовательной отрисовки.
Подключение библиотеки и создание базового экземпляра задаёт основу для индикатора.
<script src="vivus.min.js"></script>
<script>
new Vivus('loader', {
duration: 120,
type: 'oneByOne',
animTimingFunction: Vivus.EASE
});
</script>Параметр duration определяет количество кадров анимации,
а type влияет на характер прорисовки:
delayed — пути рисуются последовательно с
задержкамиsync — все пути анимируются одновременноoneByOne — поочерёдная прорисовка каждого путиasync — независимая анимация всех элементовДля индикаторов загрузки чаще используется oneByOne, так
как он создаёт ощущение структурированного процесса.
Одним из наиболее распространённых сценариев является круговой loader, основанный на окружности SVG.
<svg id="circle-loader" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" stroke="#444" fill="none" stroke-width="6"/>
</svg>new Vivus('circle-loader', {
duration: 200,
type: 'sync'
});Круговая форма удобна для визуализации прогресса благодаря равномерной длине пути. При правильной настройке stroke создаётся эффект непрерывного вращающегося или рисующегося кольца.
SVG-логотипы часто используются как центр загрузочного экрана. Vivus позволяет превращать статичный знак в динамическую анимацию.
<svg id="logo-loader" viewBox="0 0 300 100">
<path d="M10 80 L60 10 L110 80 Z" stroke="#000" fill="none"/>
<path d="M130 10 L180 80 L230 10 Z" stroke="#000" fill="none"/>
</svg>new Vivus('logo-loader', {
duration: 150,
type: 'delayed'
});Такой подход применяется для брендинговых загрузчиков, где важна не только индикация процесса, но и визуальная идентичность.
Vivus предоставляет возможность управлять моментом запуска и повторного воспроизведения, что критично для загрузочных экранов.
const loader = new Vivus('logo-loader', {
duration: 180,
type: 'oneByOne',
start: 'manual'
});
loader.play();Режим manual позволяет синхронизировать анимацию с
реальными процессами загрузки данных. В таких сценариях анимация может
запускаться только при начале запроса и завершаться при получении
ответа.
Загрузочные индикаторы часто привязываются к сетевым операциям или инициализации приложения.
const loader = new Vivus('circle-loader', {
duration: 100,
type: 'sync',
start: 'manual'
});
function loadData() {
loader.play();
fetch('/api/data')
.then(response => response.json())
.then(data => {
loader.stop();
});
}Такой подход позволяет использовать SVG-анимацию как визуальный индикатор состояния выполнения операции, а не просто декоративный элемент.
В сложных интерфейсах загрузочный экран может состоять из нескольких SVG-компонентов. Vivus поддерживает независимое управление каждым экземпляром.
const loader1 = new Vivus('icon-1', { duration: 120, type: 'delayed' });
const loader2 = new Vivus('icon-2', { duration: 200, type: 'oneByOne' });
const loader3 = new Vivus('icon-3', { duration: 160, type: 'sync' });Различие параметров создаёт ритмическую структуру анимации, что визуально снижает ощущение монотонности при длительных загрузках.
Эффективность загрузочных индикаторов напрямую зависит от качества SVG. Основные принципы оптимизации включают:
<g>Чем проще контур, тем стабильнее и предсказуемее анимация.
Параметр duration определяет общее время анимации, но
визуальное восприятие зависит также от типа распределения движения.
new Vivus('loader', {
duration: 300,
type: 'delayed',
animTimingFunction: Vivus.EASE_OUT
});Функции плавности позволяют изменять характер движения линии:
Для загрузочных индикаторов важна синхронизация с завершением анимации.
new Vivus('loader', {
duration: 200,
type: 'oneByOne',
onReady: function () {
console.log('SVG готов к анимации');
}
});Callback может использоваться для переключения интерфейса, скрытия оверлея или запуска следующего этапа интерфейсной логики.
В интерфейсах с длительной инициализацией часто используется последовательная анимация нескольких SVG-состояний.
const step1 = new Vivus('step-1', { duration: 100, type: 'sync', start: 'manual' });
const step2 = new Vivus('step-2', { duration: 120, type: 'sync', start: 'manual' });
step1.play();
setTimeout(() => {
step2.play();
}, 1500);Такой подход создаёт иллюзию прогресса даже при отсутствии реального процентного значения.
Vivus часто используется совместно с CSS-анимациями для создания многослойных индикаторов.
.loader-wrapper {
opacity: 0;
transition: opacity 0.3s ease;
}
.loader-wrapper.active {
opacity: 1;
}document.querySelector('.loader-wrapper').classList.add('active');
new Vivus('loader', { duration: 180, type: 'delayed' });Сочетание прозрачности и прорисовки создаёт эффект появления объекта из пустоты.
Для бесконечных загрузок используется перезапуск анимации после завершения.
function loopLoader() {
const v = new Vivus('loader', {
duration: 150,
type: 'oneByOne',
onReady: function () {
setTimeout(loopLoader, 500);
}
});
}
loopLoader();Такой механизм применяется в состояниях ожидания, где точное завершение неизвестно.
Комбинированные индикаторы включают несколько элементов: круги, линии, логотипы и декоративные формы. Vivus позволяет синхронизировать их в единую сцену, управляя порядком прорисовки.
SVG может включать иерархию путей, где каждый слой отвечает за отдельный этап визуализации: внешний контур, внутренние детали, текстовые элементы.
Такая структура делает загрузочный экран не просто индикатором состояния, а полноценной анимационной сценой, построенной на последовательной отрисовке векторных форм.