genesis
4145ca07c4
— Добавлен dots-pulsating (минимализм на CSS-переменных) — Добавлен rotating-text (эффект переворота букв с использованием JS) — Добавлен dna-strain (научная анимация цепочки ДНК) — Обновлен общий README.md: коллекция расширена до 8 элементов
24 lines
2.1 KiB
Markdown
24 lines
2.1 KiB
Markdown
# ⌛ Animated Loaders Collection
|
|
|
|
Сборник эффектных индикаторов загрузки для современных веб-интерфейсов.
|
|
Все лоадеры реализованы на **Pure CSS**, что гарантирует высокую производительность и отсутствие лишних зависимостей.
|
|
|
|
## Обзор коллекции
|
|
|
|
| Превью | Компонент | Стиль | Особенности |
|
|
| :----- | :------------------------------------ | :----------- | :------------------------------------------- |
|
|
| 🎰 | [`Rolling Letters`](./rolling-text/) | Текстовый | Эффект барабана и каскадное выпадение букв. |
|
|
| 🧬 | [`Helix DNA`](./helix-dna/) | 3D / Научный | Сложная анимация вращения двойной спирали. |
|
|
| ⚔️ | [`Lightsaber Fight`](./lightsaber/) | Креатив | Мини-сюжет сражения на мечах с искрами. |
|
|
| 🥞 | [`Pancake Cooking`](./pancake/) | Сюжетный | Детальная анимация подбрасывания блинчика. |
|
|
| 🎾 | [`Pong Game`](./pong-game/) | Ретро | Минималистичный геймплей легендарной игры. |
|
|
| ⚪ | [`Dots Pulsating`](./dots-pulsating/) | Минимализм | Настройка через CSS Variables, эффект волны. |
|
|
| 🔄 | [`Rotating Text`](./rotating-text/) | Текстовый | 3D-переворот букв, выбор цветов. |
|
|
| 🧬 | [`DNA Strain`](./dna/) | Научный | Плоская анимация вращения цепочки. Pure CSS |
|
|
|
|
## Технологии
|
|
|
|
- **HTML5** (Семантическая разметка)
|
|
- **CSS3 Animations** (`@keyframes`, `transitions`, `transforms`)
|
|
- **Zero JS** (Все анимации работают исключительно на стилях)
|