motion-ui/loaders

Files

T

genesis 4145ca07c4 feat: добавить лоадеры Dots, Rotating Text и DNA Strain

— Добавлен dots-pulsating (минимализм на CSS-переменных)
— Добавлен rotating-text (эффект переворота букв с использованием JS)
— Добавлен dna-strain (научная анимация цепочки ДНК)
— Обновлен общий README.md: коллекция расширена до 8 элементов

2026-04-04 22:31:42 +03:00

1.3 KiB

Executable File

Raw Blame History

⚪ Dots Pulsating Loader

Лаконичный и легкий индикатор загрузки из трех пульсирующих точек. Реализован на чистом CSS с использованием переменных для быстрой настройки.

Особенности

Pure CSS: Работает без JavaScript, используя стандартные @keyframes.
CSS Variables: Цвет фона, цвет точек и их размер легко меняются через :root (переменные --main-color, --point-color, --size).
Smooth Animation: Эффект «волны» достигается за счет последовательной задержки (animation-delay) для каждой точки.

Технические детали

Scale Effect: Анимация плавно увеличивает размер точек в 2 раза (transform: scale(2)).
Flexbox Layout: Идеальное центрирование по вертикали и горизонтали на весь экран.
Fixed Position: Лоадер перекрывает весь контент за счет position: fixed и высокого z-index.