Перейти к содержимому
RU

5 иконок · лицензия MIT

Анимированные иконки загрузки

Спиннеры и лоадеры, которые крутятся, пока что-то выполняется. Поставьте такой в кнопку отправки на время запроса, на место ещё не загруженного контента или на полноэкранную заставку; если пользователь включил уменьшение движения, они остаются неподвижными.

Все 5 иконок непрерывно проигрываются в цикле. Каждая доступна в виде React-компонента, компонента shadcn/ui и анимации Lottie JSON, а 2 из них есть ещё и в виде статичных SVG. Всё бесплатно, в том числе для коммерческих проектов, по лицензии MIT.

Все иконки категории «Загрузка»

Где их использовать

  • Кнопки отправки, ожидающие ответа на запрос
  • Заглушки, пока загружается список или график
  • Индикаторы бесконечной прокрутки и кнопки «Показать ещё»
  • Полноэкранные заставки и переходы между страницами
  • Прогресс загрузки и обработки файлов

По взаимодействию

  • Иконки с циклической анимацией · 5

    Проигрывается непрерывно; если включено уменьшение движения, остаётся на статичном первом кадре. Infinity, Loading circular, Loading V2, Loading V3, Loading V4.

Добавьте иконку в приложение

В React установите react-useanimations и импортируйте иконку: она сама проигрывает своё взаимодействие («Цикл»). Все иконки этой категории подключаются так же — замените loading на имя со страницы нужной иконки.

npm install react-useanimations
import UseAnimations from 'react-useanimations';
import loading from 'react-useanimations/lib/loading';

<UseAnimations animation={loading} size={32} />

С shadcn/ui готовый компонент добавляется через CLI:

npx shadcn@latest add https://useanimations.com/r/loading.json
import { AnimatedLoading } from '@/components/animations/loading';

<AnimatedLoading size={24} />

Не используете React? Каждая иконка — это файл Lottie JSON по адресу /icons/<id>.json; плееры для веба, iOS, Android и Flutter описаны на странице Lottie-иконки.

Частые вопросы

Какие анимированные иконки загрузки есть в наборе?

5 иконок: Infinity, Loading circular, Loading V2, Loading V3 и Loading V4. Все они бесплатны для личных и коммерческих проектов по лицензии MIT, указывать авторство не нужно.

Как использовать эти анимированные иконки загрузки в React?

Установите react-useanimations, добавьте import loading from 'react-useanimations/lib/loading' и отрендерите <UseAnimations animation={loading} size={32} />. Иконка проигрывает своё взаимодействие («Цикл») и берёт цвет текста. Если у вас shadcn/ui, вместо этого выполните npx shadcn@latest add https://useanimations.com/r/loading.json.

Можно ли использовать эти анимированные иконки загрузки без React?

Да. Каждая иконка — это файл Lottie JSON по адресу https://useanimations.com/icons/<id>.json (например, https://useanimations.com/icons/loading.json), который воспроизводят lottie-web, lottie-ios, lottie-android и пакет lottie для Flutter; статичные SVG лежат на странице каждой иконки (страницы иконок — на английском). Ни одна иконка этой категории не использует выражения, так что достаточно облегчённой сборки lottie-web.