Демонстрация загрузчиков
Спиннеры, прогресс-бары, скелетоны и кнопки с загрузкой
Круговые спиннеры
Размеры:
XS
SM
MD
LG
XL
Цвета:
Скорость:
Быстрая
Нормальная
Медленная
Точечные спиннеры
Размеры:
XS
SM
MD
LG
XL
Цвета:
Линейные прогресс-бары
Размеры:
XS:
SM:
MD:
LG:
XL:
Цвета:
С анимацией и текстом:
75%
Загрузка...
Круговые прогресс-бары
Примеры:
75%
90%
45%
Размеры:
60%
60%
60%
60%
Скелетоны
Размеры текста:
Текстовые блоки:
Аватары:
XS
SM
MD
LG
XL
Изображения:
Плейсхолдер изображения (4:3)
Пример карточки:
Кнопки со спиннерами
Статический показ:
Outline варианты:
Ghost варианты:
Размеры:
Интерактивные:
Практичные компоненты
Загрузка контейнера:
Контент контейнера
Нажмите кнопку для демонстрации загрузки
Загрузка таблицы:
Загрузка данных...
Пошаговый прогресс:
✓
✓
3
4
Информация о системе
Особенности стилей загрузчиков:
- Все анимации используют CSS переменные для контроля скорости
- Поддержка темной темы через
[data-theme="dark"] - Адаптивные размеры для мобильных устройств
- Плавные переходы и анимации
- Круговые прогресс-бары построены на SVG для точности
- Скелетоны с анимацией волны (shimmer effect)
- Кнопки со спиннерами сохраняют цвет фона и границы
Основные классы:
.app-spinner - круговой спиннер.app-dot-spinner - точечный спиннер.app-progress - прогресс-бар
.app-circle-progress - круговой прогресс.app-skeleton - скелетон.app-btn-loading - кнопка с загрузкой
.app-loading-overlay - overlay.app-table-loading - загрузка таблицы.app-step-progress - пошаговый прогресс
Используемые CSS переменные:
--app-color-primary--app-color-success--app-color-danger--app-color-warning
--app-color-info--app-color-secondary--app-color-bg-tertiary--app-color-text-muted
Продолжая использовать сайт, вы соглашаетесь на обработку файлов cookie и принимаете Пользовательское соглашение