16 lines
1.3 KiB
Markdown
16 lines
1.3 KiB
Markdown
|
# ⚪ 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`.
|