ADS Artemy Design System
VIT / motion / loading

Анимации и загрузки

Движение в Artemy Design System спокойное: оно подтверждает состояние, помогает ждать и показывает, что система живая. Без bounce, без агрессивного параллакса, без декоративной суеты.

Как делать

  • Повторяй форму будущего контента: строки, карточки, таблицы.
  • Используй при ожидании больше 300-500 мс.

Смотреть

  • Скелетон не должен менять высоту после загрузки.
  • Для таблиц делай несколько строк, а не один большой блок.

Не делать

  • Не показывать скелетон поверх уже известных данных.
  • Не делать shimmer слишком контрастным.
HTML snippet 
<div class="ae-skeleton" aria-label="Загрузка">
  <div class="ae-skeleton__line" style="width: 72%"></div>
  <div class="ae-skeleton__line" style="width: 94%"></div>
  <div class="ae-skeleton__line" style="width: 48%"></div>
</div>
CSS classes / tokens 
.ad-skeleton
.ae-skeleton__line
.ae-skeleton__line::after
@keyframes ae-shimmer

animation: ae-shimmer 1.4s var(--ds-ease-standard) infinite;

Как делать

  • Используй для коротких операций без структуры результата.
  • Добавляй aria-label с понятным действием.

Смотреть

  • Если ожидание длиннее 2-3 секунд, лучше progress или текст статуса.
  • Размер должен быть вторичным, не главным объектом экрана.

Не делать

  • Не ставить несколько спиннеров на одной панели.
  • Не использовать как замену реальному состоянию ошибки.
HTML snippet 
<div class="ae-spinner" role="status" aria-label="Считаю"></div>
CSS classes / tokens 
.ad-spinner
@keyframes ae-spin

border-top-color: var(--ds-vit-action);
animation: ae-spin 900ms linear infinite;
камера 02 видит шкаф

Как делать

  • Показывай только живые, нормальные подключения.
  • Ставь рядом короткий текст: что именно активно.

Смотреть

  • Пульс должен быть медленным и мягким.
  • Для ошибки меняй компонент, а не только цвет точки.

Не делать

  • Не пульсировать все статусы на странице.
  • Не использовать зеленый пульс для неопределенного состояния.
HTML snippet 
<div style="display:flex;align-items:center;gap:12px">
  <span class="ae-pulse-dot" aria-hidden="true"></span>
  <span>камера 02 видит шкаф</span>
</div>
CSS classes / tokens 
.ad-pulse-dot
@keyframes ae-pulse

background: var(--ds-success);
animation: ae-pulse 1.8s var(--ds-ease-standard) infinite;
полка 1
острые 8
байтсы 6
стрипсы 4
крылья 7

Как делать

  • Применяй к зоне, которую система сейчас распознает.
  • Оставляй сам объект читаемым под подсветкой.

Смотреть

  • Скан не должен конкурировать с красной ошибкой.
  • Движение должно останавливаться после результата.

Не делать

  • Не использовать скан как постоянный фон.
  • Не делать яркую линию на таблицах и плотных графиках.
HTML snippet 
<div class="ae-cabinet ae-scan">
  ...
</div>
CSS classes / tokens 
.ad-scan
.ae-scan::after
@keyframes ae-scan

animation: ae-scan 2s var(--ds-ease-standard) infinite;

Готово

Добавление стрипсов зафиксировано.

Как делать

  • Подтверждай только завершенное действие.
  • Держи текст коротким: заголовок и одна строка.

Смотреть

  • Toast не должен закрывать рабочую команду.
  • Для опасных действий нужна явная фиксация, а не только toast.

Не делать

  • Не складывать много toast в стопку.
  • Не использовать toast для критической ошибки.
HTML snippet 
<div class="ae-toast" role="status">
  <h3 class="ae-toast__title">Готово</h3>
  <p class="ae-toast__text">Добавление стрипсов зафиксировано.</p>
</div>
CSS classes / tokens 
.ad-toast
.ae-toast__title
.ae-toast__text
@keyframes ae-enter

animation: ae-enter 420ms var(--ds-ease-standard) both;

Как делать

  • Используй для фоновой проверки без точного процента.
  • Добавляй текст состояния рядом, если ожидание заметное.

Смотреть

  • Если процент известен, показывай determinate progress.
  • Скорость анимации должна быть спокойной.

Не делать

  • Не обещать точность там, где ее нет.
  • Не делать бегущую полосу на критическом алерте.
HTML snippet 
<div class="ae-progress" role="progressbar" aria-label="Проверяю шкаф">
  <div class="ae-progress__bar"></div>
</div>
CSS classes / tokens 
.ad-progress
.ae-progress__bar
@keyframes ae-progress-soft

background: var(--ds-vit-action);
animation: ae-progress-soft 2.4s var(--ds-ease-standard) infinite;

Как делать

  • Подходит для сборки состояния из нескольких источников.
  • Используй как центральный loader в пустой области.

Смотреть

  • Количество точек должно оставаться узнаваемой сеткой 3x3.
  • Цвет лучше держать в action-токене.

Не делать

  • Не ставить внутри маленькой кнопки.
  • Не ускорять до мерцания.
HTML snippet 
<div class="ae-dots-grid" role="status" aria-label="Собираю состояние">
  <span></span><span></span><span></span>
  <span></span><span></span><span></span>
  <span></span><span></span><span></span>
</div>
CSS classes / tokens 
.ad-dots-grid
.ae-dots-grid span
@keyframes ae-dot-grid

background: var(--ds-vit-action);
animation: ae-dot-grid 1.4s var(--ds-ease-standard) infinite;
меню закрыть

Как делать

  • Используй для парных состояний: меню/закрыть, сервис/назад.
  • Оба слова должны быть короткими и примерно равными по длине.

Смотреть

  • На touch-экранах hover нужно заменить на pressed/open state.
  • Анимация должна помогать понять смену режима.

Не делать

  • Не использовать для важных команд подтверждения.
  • Не морфить длинные фразы.
HTML snippet 
<div class="ae-menu-morph" aria-label="Меню">
  <span class="ae-menu-morph__word ae-menu-morph__word--menu">меню</span>
  <span class="ae-menu-morph__word ae-menu-morph__word--close">закрыть</span>
</div>
CSS classes / tokens 
.ad-menu-morph
.ae-menu-morph::before
.ae-menu-morph__word
.ae-menu-morph:hover ...
@keyframes ae-menu-dot

--ds-font-mono
--ds-vit-action
--ds-duration-standard

Как делать

  • Хорош для ожидания добавления, раскрытия или создания объекта.
  • Ставь рядом с контекстом действия, если это не общий loader.

Смотреть

  • Plus может читаться как кнопка добавления, не путай состояния.
  • Оставляй aria-label с реальным процессом.

Не делать

  • Не использовать для удаления или ошибки.
  • Не ставить рядом с активной кнопкой plus.
HTML snippet 
<div class="ae-plus-loader" role="status" aria-label="Добавляю"></div>
CSS classes / tokens 
.ad-plus-loader
.ae-plus-loader::before
.ae-plus-loader::after
@keyframes ae-plus-turn

animation: ae-plus-turn 1.6s var(--ds-ease-standard) infinite;

Как делать

  • Используй как сигнал активности камеры, сенсора или микрособытия.
  • Лучше работает около иконки/модуля, а не отдельно.

Смотреть

  • Кольцо не должно перекрывать важный текст.
  • Для физического LED можно повторить тот же ритм мягким дыханием.

Не делать

  • Не использовать как тревогу: для тревоги нужен красный статус и текст.
  • Не делать бесконечно яркие вспышки.
HTML snippet 
<div class="ae-ring-burst" role="status" aria-label="Сенсор активен">
  <span></span>
</div>
CSS classes / tokens 
.ad-ring-burst
.ae-ring-burst::before
.ae-ring-burst::after
.ae-ring-burst span
@keyframes ae-ring-burst

border-color: var(--ds-vit-action);

Как делать

  • Подходит для очереди событий, буфера заказов, синхронизации логов.
  • Используй сервисный cyan, когда это информационный процесс.

Смотреть

  • Если очередь реальная, рядом показывай число или статус.
  • Движение должно быть горизонтальным и компактным.

Не делать

  • Не использовать как общий loader для всего экрана.
  • Не делать слишком много кругов.
HTML snippet 
<div class="ae-stack-loader" role="status" aria-label="События">
  <span></span><span></span><span></span><span></span><span></span>
</div>
CSS classes / tokens 
.ad-stack-loader
.ae-stack-loader span
@keyframes ae-stack-spread

background: var(--ds-terminal-cyan);

Как делать

  • Используй для синхронизации модулей или поиска периферии.
  • Смысл: система обходит несколько точек и собирает связь.

Смотреть

  • Linear timing подходит для орбиты, но не для появления элементов.
  • На плотных экранах уменьшай размер, а не скорость.

Не делать

  • Не использовать рядом с круговыми графиками, будет путаница.
  • Не делать орбиту главным брендовым знаком.
HTML snippet 
<div class="ae-orbit-loader" role="status" aria-label="Синхронизация">
  <span></span><span></span><span></span><span></span>
</div>
CSS classes / tokens 
.ad-orbit-loader
.ae-orbit-loader span
@keyframes ae-orbit-spin

animation: ae-orbit-spin 1.8s linear infinite;

Как делать

  • Оставь для R&D, 3D, железа, сборки модуля или демо.
  • Держи его редким акцентом, не базовым индикатором.

Смотреть

  • 3D-анимация тяжелее визуально, проверяй на слабом планшете.
  • Сохраняй плоский интерфейс вокруг, чтобы куб не выглядел игрушечно.

Не делать

  • Не ставить в рабочий кухонный экран как постоянную загрузку.
  • Не смешивать с другими 3D-эффектами.
HTML snippet 
<div class="ae-cube-loader" role="status" aria-label="Готовлю модуль">
  <span></span><span></span><span></span>
</div>
CSS classes / tokens 
.ad-cube-loader
.ae-cube-loader span
@keyframes ae-cube-turn

transform-style: preserve-3d;
animation: ae-cube-turn 2.2s var(--ds-ease-standard) infinite;

Как делать

  • Используй для поиска устройств, распределения задач, обнаружения модулей.
  • Хорошо работает в пустом состоянии настройки.

Смотреть

  • Расширение не должно выходить за контейнер.
  • Для mobile держи размер фиксированным.

Не делать

  • Не использовать в маленьких таблицах и компактных строках.
  • Не добавлять подпрыгивание или резкие scale-скачки.
HTML snippet 
<div class="ae-expanding-dots" role="status" aria-label="Ищу модули">
  <span></span><span></span><span></span>
  <span></span><span></span><span></span>
</div>
CSS classes / tokens 
.ad-expanding-dots
.ae-expanding-dots span
@keyframes ae-expand-dot

uses custom properties: --x, --y
animation: ae-expand-dot 1.9s var(--ds-ease-standard) infinite;
Field sphere scan

Где использовать: камера шкафа собирает объемную картину полок, AI распознает лотки, модуль переходит из warm-up в “вижу объект”.

Sonar sweep

Где использовать: поиск IoT-модулей рядом, проверка сети, обнаружение камеры, сканирование зоны без точного результата.

Helix scanner

Где использовать: калибровка щупа датчика масла, прогрев сенсора, серия измерений, где важно показать “идет техническая проверка”.

Interconnecting waves

Где использовать: синхронизация Часовика, камеры, датчика масла и BI; обмен событиями между модульными устройствами Field System.

Voxel matrix morph

Где использовать: AI собирает состояние из кадров, пересчитывает прогноз, превращает поток заказов в понятную команду.

Cylindrical analysis

Где использовать: анализ масла во фритюре, вертикальный датчик уровня, емкость, фильтр, техническая диагностика внутри железного модуля.

Правило применения: Эти анимации ставим только там, где пользователь должен почувствовать работу сенсора или алгоритма. Для обычного ожидания оставляем skeleton/progress; для ошибок показываем статус и действие, а не красивую абстракцию.

Как делать

  • Подписывай процесс словами: “ищу камеру”, “калибрую щуп”, “собираю прогноз”.
  • Держи движение медленным, техническим и малоконтрастным.
  • Используй одну такую анимацию на экран или панель.

Смотреть

  • Если результат известен, сразу меняй анимацию на конкретный статус.
  • На рабочем планшете проверяй FPS и включай reduced motion.
  • Форма должна соответствовать смыслу: sonar для поиска, helix для калибровки, network для связи.

Не делать

  • Не использовать как фон всей страницы.
  • Не ставить рядом несколько сложных сканов: они начнут спорить между собой.
  • Не заменять ими текст ошибки, проценты или действие сотрудника.
HTML snippet 
<article class="ae-circle-motion-card">
  <div class="ae-circle-motion-card__label">Sonar sweep</div>
  <canvas
    data-ad-circle-motion="sonar"
    width="220"
    height="220"
    aria-label="Сонарный поиск"></canvas>
  <p class="ae-circle-motion-card__use">Поиск IoT-модулей рядом.</p>
</article>
CSS classes / tokens 
.ad-circle-motion-grid
.ae-circle-motion-card
.ae-circle-motion-card__label
.ae-circle-motion-card__use
canvas[data-ad-circle-motion]

tokens:
--ds-vit-action
--ds-terminal-cyan
--ds-ink
--ds-warm-line
--ds-duration-standard