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

Radix UI предоставляет мощный набор компонентов с готовыми, доступными и высоко настраиваемыми интерфейсными элементами. Для создания плавных и эффективных анимаций загрузки используется комбинация встроенных свойств компонентов, CSS-анимаций и возможностей библиотеки для управления состоянием.

Компоненты для индикаторов загрузки

В Radix UI нет отдельного компонента «Loader», но для реализации анимации загрузки часто используют следующие элементы:

  • Progress — индикатор прогресса загрузки с возможностью отслеживания состояния.
  • Spinner — анимированный спиннер, реализуемый через CSS и @radix-ui/react-primitive или собственный компонент.
  • Dialog / Popover — для отображения загрузки в модальных окнах или всплывающих подсказках.

Пример базового индикатора с использованием Progress:

import * as Progress from '@radix-ui/react-progress';

CSS-анимация индикатора может быть добавлена следующим образом:

.progress-root {
  height: 8px;
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-indicator {
  height: 100%;
  width: 0;
  background-color: #4f46e5;
  border-radius: 4px;
  transition: width 0.3s ease-in-out;
}

Изменение значения value через состояние React позволяет плавно анимировать индикатор:

const [progress, setProgress] = React.useState(0);

React.useEffect(() => {
  const interval = setInterval(() => {
    setProgress(prev => (prev < 100 ? prev + 5 : 100));
  }, 500);

  return () => clearInterval(interval);
}, []);

Создание спиннера с анимацией

Спиннер реализуется с помощью CSS-анимаций и компонента Primitive:

import { Primitive } from '@radix-ui/react-primitive';

const Spinner = () => (
  
);

CSS-анимация вращения:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

Анимация появления и исчезновения компонентов

Radix UI предоставляет удобные свойства для управления состояниями компонентов, что позволяет интегрировать анимации появления и исчезновения:

import * as Dialog from '@radix-ui/react-dialog';


  Открыть загрузку
  
  
    
    
Загрузка данных...

CSS-анимации для Overlay и Content:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.dialog-overlay {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  inset: 0;
  animation: fadeIn 0.3s ease-out forwards;
}

.dialog-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
  animation: slideUp 0.3s ease-out forwards;
}

Использование анимаций через @radix-ui/react-animations позволяет синхронизировать их с состояниями компонентов, обеспечивая более плавный пользовательский опыт.

Комбинирование прогресса и спиннера

Для сложных сценариев загрузки часто используют комбинацию индикатора прогресса и спиннера:

Такой подход позволяет одновременно визуализировать неопределённое ожидание (спиннер) и точное состояние загрузки (progress bar).

Поддержка доступности

Radix UI автоматически поддерживает ARIA-атрибуты для компонентов, что делает анимацию загрузки доступной:

  • aria-valuenow, aria-valuemin, aria-valuemax для индикатора прогресса.
  • aria-busy и role="status" для уведомлений о загрузке.
  • Управление фокусом при открытии и закрытии модальных окон.

Пример индикатора с ARIA:

Использование анимаций с Tailwind и Radix

Radix UI хорошо интегрируется с Tailwind CSS. Анимации можно применять через утилиты:

Tailwind позволяет быстро создавать кастомные ключевые кадры для уникальных эффектов загрузки без написания отдельного CSS-файла.

Оглавление