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
parent 29324fca97
commit 4145ca07c4
12 changed files with 590 additions and 7 deletions
@@ -0,0 +1,15 @@
+# ⚪ 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`.
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>Dots Pulsating Loader</title>
+  <link rel="stylesheet" href="./style.css">
+
+</head>
+<body>
+<!-- partial:index.partial.html -->
+<div class="loader">
+  <span class="loader__element"></span>
+  <span class="loader__element"></span>
+  <span class="loader__element"></span>
+</div>
+<!-- partial -->
+  
+</body>
+</html>
@@ -0,0 +1,40 @@
+:root {
+  --main-color: #ecf0f1;
+  --point-color: #555;
+  --size: 5px;
+}
+
+.loader {
+	background-color: var(--main-color);
+	overflow: hidden;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0; left: 0;
+  display: flex;
+  align-items: center;
+  align-content: center; 
+  justify-content: center;  
+	z-index: 100000;
+}
+
+.loader__element {
+  border-radius: 100%;
+  border: var(--size) solid var(--point-color);
+  margin: calc(var(--size)*2);
+}
+
+.loader__element:nth-child(1) {
+  animation: preloader .6s ease-in-out alternate infinite;
+}
+.loader__element:nth-child(2) {
+  animation: preloader .6s ease-in-out alternate .2s infinite;
+}
+
+.loader__element:nth-child(3) {
+  animation: preloader .6s ease-in-out alternate .4s infinite;
+}
+
+@keyframes preloader {
+  100% { transform: scale(2); }
+}