AES Loader

О библиотеке #

AES Loader — это лёгкая, самодостаточная библиотека для создания стильных загрузчиков с поддержкой финальных состояний (успех / ошибка) и возможностью фиксации загрузчика на экране (fixed), чтобы он всегда был виден пользователю.

Особенности

5 стилей — Cyber, Glitch, Terminal, Minimal, Logic3D
Финальные анимации — галочка / крестик с плавным переходом
Promise‑based API — .then() / .catch()
Автозапуск — загрузчик появляется при загрузке страницы
Фиксация на экране (fixed) — загрузчик всегда виден, даже при прокрутке
Кастомизация — заголовок, текст, финальное сообщение
Контейнеры — можно привязать к любому элементу
Таймаут — автоматический fail по истечении времени
Zero dependencies — чистый Vanilla JS

Быстрый старт

HTML - подключение

HTML - подключение через CDN

<script src="https://cdn.aes-wardarkness.ru/library/js/aes-loader/aes-loader.js"></script>

JavaScript - базовое использование

// Создаём загрузчик
const loader = AESLoaderInstance.showLoader(
    'cyber',   // стиль
    'Загрузка', // заголовок
    'Пожалуйста, подождите...' // текст
);
                        
// Через 2 секунды - успех
setTimeout(() => {
    loader.success('Готово!');
}, 2000);

Стили загрузчиков #

Нажмите «Показать», чтобы увидеть стиль в действии. Кнопки «Успех» и «Ошибка» демонстрируют финальные анимации.

Полноэкранная демонстрация #

Запустите любой стиль на всю страницу. Загрузчик автоматически завершится через 4 секунды.

API #

Полное описание методов, опций и возвращаемых значений.

new AESLoader(config) конструктор

Создаёт экземпляр загрузчика. Обычно используется автоматически через AESLoaderInstance.

const loader = new AESLoader({
    mode:         'default',
    defaultStyle: 'cyber',
    defaultTitle: 'Загрузка',
    defaultText:  'Пожалуйста, подождите...',
    fixed:        true,
    autoStart:    true,
    showFinal:    true,
});

showLoader(style, title, text, period, element, finalText, showFinal, fixed) метод

Показывает загрузчик и возвращает объект управления.

Параметр	Тип	По умолчанию	Описание
style	string	'cyber'	Один из: cyber, glitch, terminal, minimal, logic3d
title	string	'Загрузка'	Заголовок загрузчика
text	string	'Пожалуйста, подождите...'	Подзаголовок / сообщение
period	number \| null	null	Таймаут в мс - по истечении автоматический fail()
element	string \| Element \| null	null	CSS‑селектор или DOM‑элемент, в который вставить загрузчик (игнорируется при fixed: true)
finalText	string	'Готово'	Текст при успешном завершении
showFinal	boolean	true	Показывать ли финальную анимацию
fixed	boolean	false	Фиксировать загрузчик на экране (viewport), игнорируя контейнер
fadeIn	boolean	false	Включить плавное появление (анимация opacity)
fadeOut	boolean	true	Включить плавное исчезновение при скрытии
fadeInDuration	number	0.3	Длительность появления в секундах
fadeOutDuration	number	0.6	Длительность исчезновения в секундах

Возвращаемый объект

{
    id:       'aes-loader-1',  // уникальный идентификатор
    hide:     function,          // скрыть без анимации
    success:  function,          // завершить с успехом
    fail:     function,          // завершить с ошибкой
    promise:  Promise,           // Promise, который резолвится при success
    then:     function,          // .then() от Promise
    catch:    function,          // .catch() от Promise
}

success(finalText) метод

Завершает загрузчик с состоянием успех. Показывает галочку и финальное сообщение.

loader.success('Данные загружены!');

fail(errorTitle, errorText) метод

Завершает загрузчик с состоянием ошибка. Показывает крестик и сообщение об ошибке.

loader.fail('Ошибка сети', 'Не удалось подключиться к серверу');

hide() метод

Скрывает загрузчик без финальной анимации. Удаляет из DOM.

loader.hide();

AESLoaderInstance глобальный

Глобальный экземпляр библиотеки, создаваемый автоматически. Доступен как window.AESLoaderInstance.

// Использование глобального инстанса
const loader = AESLoaderInstance.showLoader('minimal');

Примеры #

Готовые сценарии использования — от простого до продвинутого. Нажмите «Запустить», чтобы увидеть код в действии.

Пример 1 — простой загрузчик

Показываем загрузчик, через 2 секунды — успех.

const loader = AESLoaderInstance.showLoader(
    'cyber',
    'Загрузка',
    'Подготовка данных...'
);
                
setTimeout(() => {
    loader.success('Готово!');
}, 2000);

Ожидание

Пример 2 — с таймаутом и обработкой ошибки

Если операция не завершилась за 3 секунды — автоматический fail().

const loader = AESLoaderInstance.showLoader(
    'glitch',
    'Подключение',
    'Соединение с сервером...',
    3000  // таймаут 3 сек
);
                
loader.catch(err => {
    console.log('Ошибка:', err.title);
});

Ожидание

Пример 3 — кастомный контейнер

Загрузчик вставляется в указанный элемент (не на всю страницу).

// HTML: <div id="custom-container"></div>
const loader = AESLoaderInstance.showLoader(
    'terminal',
    'Сканирование',
    'Анализ файлов...',
    null,
    '#custom-container'
);
                
setTimeout(() => {
    loader.success('Завершено');
}, 2500);

Ожидание

Пример 4 — цепочка загрузчиков

Последовательное выполнение с помощью .then().

const step1 = AESLoaderInstance.showLoader(
    'minimal',
    'Шаг 1',
    'Загрузка модулей...'
);
                
step1.then(() => {
    const step2 = AESLoaderInstance.showLoader(
        'logic3d',
        'Шаг 2',
        'Обработка данных...'
    );
    setTimeout(() => step2.success(), 1500);
    return step2.promise;
});
                
setTimeout(() => step1.success(), 1000);

Ожидание

Пример 5 — фиксация на экране (fixed: true)

Загрузчик всегда остаётся в центре экрана, даже если прокручивать страницу.

// При создании экземпляра
const loader = new AESLoader({ fixed: true });
loader.showLoader('cyber', 'Фиксированная загрузка', 'Не исчезнет при прокрутке');
                
// Или через глобальный экземпляр с передачей параметра в showLoader
const inst = AESLoaderInstance.showLoader(
    'glitch',
    'Загрузка',
    'Фиксированный режим',
    null,
    null,
    'Готово!',
    true,   // showFinal
    true    // fixed
);

Ожидание

fixed: true игнорирует параметр element и всегда вставляет загрузчик в document.body с position: fixed.

Примеры с параметрами Fade

Комбинации плавного/резкого появления и исчезновения. Все примеры отображаются внутри контейнера ниже.

Пример 6 — плавное появление и плавное исчезновение

fadeIn: true, fadeOut: true (длительности: 2.0 и 2.0 сек)

const loader = AESLoaderInstance.showLoader(
    'minimal',
    'Fade Demo',
    'Плавное появление и исчезновение',
    null,
    '#fade-demo-container',
    'Готово',
    true,
    false,  // fixed
    true,   // fadeIn
    true,   // fadeOut
    2.0,    // fadeInDuration
    2.0     // fadeOutDuration
);

Ожидание

Пример 7 — плавное появление, резкое исчезновение

fadeIn: true, fadeOut: false (длительности: 2.0 и 2.0 сек)

const loader = AESLoaderInstance.showLoader(
    'terminal',
    'Fade Demo',
    'Появление плавное, исчезновение резкое',
    null,
    '#fade-demo-container',
    'Готово',
    true,
    false,
    true,   // fadeIn
    false,   // fadeOut
    2.0,    // fadeInDuration
    2.0     // fadeOutDuration (не используется)
);

Ожидание

Пример 8 — резкое появление, плавное исчезновение

fadeIn: false, fadeOut: true (длительности: 2.0 и 2.0 сек)

const loader = AESLoaderInstance.showLoader(
    'glitch',
    'Fade Demo',
    'Появление резкое, исчезновение плавное',
    null,
    '#fade-demo-container',
    'Готово',
    true,
    false,
    false,  // fadeIn
    true,   // fadeOut
    2.0,    // fadeInDuration (не используется)
    2.0     // fadeOutDuration
);

Ожидание

Пример 9 — резкое появление и резкое исчезновение

fadeIn: false, fadeOut: false (длительности: 2.0 и 2.0 сек)

const loader = AESLoaderInstance.showLoader(
    'logic3d',
    'Fade Demo',
    'Появление и исчезновение резкие',
    null,
    '#fade-demo-container',
    'Готово',
    true,
    false,
    false,  // fadeIn
    false,   // fadeOut
    2.0,    // fadeInDuration (не используется)
    2.0     // fadeOutDuration (не используется)
);

Ожидание

Добавление своего стиля #

Расширьте библиотеку собственным визуальным стилем. Ниже — пошаговая инструкция.

Создайте CSS-классы

Определите стили для вашего загрузчика. Используйте префикс .my- для избежания конфликтов.

/* my-style.css */
.my-loader {
    text-align: center;
    color: #fff;
}
.my-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid #ff6b6b;
    border-radius: 50%;
    animation: mySpin 1s linear infinite;
}
@keyframes mySpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Расширьте класс AESLoader

Переопределите методы _buildContent и _buildFinalContent.

class MyLoader extends AESLoader {
    _buildContent(style, title, text) {
        if (style === 'my-style') {
            return `
                <div class="my-loader">
                    <div class="my-spinner"></div>
                    <h2>${title}</h2>
                    <p>${text}</p>
                </div>`;
        }
        return super._buildContent(style, title, text);
    }

    _buildFinalContent(style, isSuccess, data) {
        if (style === 'my-style') {
            // своя финальная разметка
            return `<div class="my-final">...</div>`;
        }
        return super._buildFinalContent(style, isSuccess, data);
    }
}

Используйте свой класс

Создайте экземпляр MyLoader и передайте стиль 'my-style'.

const loader = new MyLoader({
    defaultStyle: 'my-style',
    defaultTitle: 'Мой загрузчик',
    defaultText: 'Загрузка...',
    autoStart: false,
    fixed: true,   // можно сразу задать фиксацию
});
                
loader.showLoader('my-style');

Глобальная регистрация (опционально)

Замените глобальный инстанс на свой, чтобы использовать везде.

window.AESLoaderInstance = new MyLoader({ autoStart: false, fixed: true });

О библиотеке #

Стили загрузчиков #

Полноэкранная демонстрация #

API #

Примеры #

Примеры с параметрами Fade

Добавление своего стиля #

Создайте CSS-классы

Расширьте класс AESLoader

Используйте свой класс

Глобальная регистрация (опционально)

Скачать библиотеку #