Завантажувачі одного елемента: точки

Ми розглядаємо навантажувачі цієї серії. Більше того, ми розбираємо деякі загальні шаблони завантажувачів і те, як їх відтворити за допомогою лише одного div. Поки що ми розібралися класичний обертовий навантажувач. А тепер давайте подивимося на іншу, яку ви, ймовірно, добре знаєте: точки.

Точкові завантажувачі повсюди. Вони акуратні, тому що зазвичай складаються з трьох крапок, які виглядають як багатокрапка (…), яка танцює навколо.

Наша мета полягає в тому, щоб зробити те саме з одного елемента div. Іншими словами, немає жодного div на крапку або окремої анімації для кожної крапки.

Наведений вище приклад завантажувача складається з одного елемента div, кількох декларацій CSS і без псевдоелементів. Я поєдную дві техніки за допомогою CSS background та mask. А коли ми закінчимо, ми побачимо, як анімація фонового градієнта допомагає створити ілюзію кожної крапки, що змінює колір, коли вони послідовно рухаються вгору та вниз.

Фонова анімація

Почнемо з фонової анімації:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Сподіваюся, це виглядає досить просто. Те, що ми маємо, це a 180pxу всьому світі .loader елемент, який показує два конічні градієнти з жорсткими кольоровими зупинками між двома кольорами кожен — перший градієнт червоний і синій уздовж верхньої половини .loader, а другий градієнт – зелений і фіолетовий уздовж нижньої половини.

Спосіб розміру фону завантажувача (200% широкий), ми бачимо лише один із цих кольорів у кожній половині одночасно. Потім у нас є маленька анімація, яка змінює положення фонових градієнтів ліворуч, праворуч і назад назавжди.

При роботі з властивостями фону — особливо background-position — Я завжди посилаюся на своє Відповідь Stack Overflow, де я даю детальне пояснення про те, як все це працює. Якщо вам незручно обманювати фон CSS, я настійно рекомендую прочитати цю відповідь, щоб допомогти з тим, що буде далі.

Зверніть увагу на анімацію, що перший шар є Y=0% (розміщується вгорі) поки X є зміни від 0% до 100%. Для другого шару маємо те саме для X але Y=100% (розміщується внизу).

Навіщо використовувати a conic-gradient() замість linear-gradient()?

Гарне питання! Інтуїтивно зрозуміло, що ми повинні використовувати лінійний градієнт для створення двоколірних градієнтів, як це:

linear-gradient(90deg, red 50%, blue 0)

Але ми також можемо досягти того ж, використовуючи a conic-gradient() — і з меншою кількістю коду. Ми скорочуємо код, а також вивчаємо новий трюк у процесі!

Пересуваючи кольори ліворуч і праворуч, це гарний спосіб зробити так, ніби ми змінюємо кольори, але, можливо, було б краще, якщо ми замість цього миттєво змінимо кольори — у такому випадку немає шансів, що точка завантажувача блимає двома кольорами одночасно . Для цього змінимо animationФункція синхронізації з linear до steps(1)

Завантажувач крапки

Якщо ви слідували разом із перша стаття в цій серії, впевнений, ти знаєш, що буде далі: CSS маски! Що робить маски такими чудовими, так це те, що вони дозволяють нам «вирізати» частини фону у формі іншого елемента. Отже, у цьому випадку ми хочемо зробити кілька точок, показати градієнти фону через точки та вирізати будь-які частини фону, які не є частиною точки.

Ми збираємось використовувати radial-gradient() для цього:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Там є дубльований код, тому давайте створимо змінну CSS, щоб зменшити речі:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Круто круто. Але тепер нам потрібна нова анімація, яка допоможе переміщувати крапки вгору та вниз між анімованими градієнтами.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Так, це загалом три радіальні градієнти, усі з однаковою конфігурацією та однаковим розміром — анімація оновить положення кожного з них. Зверніть увагу, що X координата кожної точки фіксована. The mask-position визначається так, що перша крапка знаходиться ліворуч (0%), другий по центру (50%), а третій праворуч (100%). Ми лише оновлюємо Y координати від 0% до 100% щоб крапки танцювали.

Ось що ми отримуємо:

Тепер поєднайте це з нашою градієнтною анімацією, і почне відбуватися магія:

Варіанти точкового завантажувача

Змінна CSS, яку ми створили в останньому прикладі, значно полегшує заміну нових кольорів і створення нових варіацій того самого завантажувача. Наприклад, різних кольорів і розмірів:

А як щодо іншого руху для наших точок?

Тут все, що я зробив, це оновив анімацію для врахування різних позицій, і ми отримали інший завантажувач із тією самою структурою коду!

Техніку анімації, яку я використав для шарів-масок, також можна використовувати з фоновими шарами, щоб створити багато різних завантажувачів одного кольору. Про це я написав докладну статтю. Ви побачите, що з однієї структури коду ми можемо створювати різні варіанти, просто змінюючи кілька значень. Я ділюся кількома прикладами в кінці статті.

Чому не завантажувач з однією крапкою?

Це має бути досить легко отримати, оскільки я використовую ту саму техніку, але з більш простою логікою:

Ось ще один приклад завантажувача, де я також анімую radial-gradient в поєднанні з CSS фільтри та mix-blend-mode щоб створити ефект плям:

Якщо ви перевірите код, ви побачите, що все, що я там роблю, це анімація background-position, точно так само, як ми зробили з попереднім завантажувачем, але додавши дефіс background-size щоб здавалося, що крапка стає більшою, коли вона поглинає точки.

Якщо ви хочете зрозуміти магію цього ефекту краплі, ви можете звернутися до ці інтерактивні слайди (Лише Chrome) від Ана Тюдор тому що вона так добре висвітлює тему!

Ось ще одна ідея точкового завантажувача, цього разу з використанням іншої техніки:

Це лише 10 декларацій CSS і ключовий кадр. Головний елемент і два його псевдоелементи мають однакову конфігурацію фону з одним радіальним градієнтом. Кожен створює одну точку, загалом три. Анімація переміщує градієнт зверху вниз, використовуючи різні затримки для кожної точки.

О, і зверніть увагу, як ця демонстрація використовує CSS Grid. Це дозволяє нам використовувати параметри сітки за замовчуванням stretch вирівнювання таким чином, щоб обидва псевдоелементи покривали всю область свого батька. Немає необхідності в розмірі! Трохи посуньте навколо translate() і все готово.

Більше прикладів!

Просто щоб підкреслити суть, я хочу залишити вам купу додаткових прикладів, які насправді є варіаціями того, що ми розглядали. Переглядаючи демонстрації, ви побачите, що підходи, які ми тут висвітлюємо, надзвичайно гнучкі та відкривають масу можливостей дизайну.

Далі…

Отже, ми розглянули точкові завантажувачі в цій статті та спінери в останній. У наступній статті цієї серії з чотирьох частин ми звернемо увагу на інший поширений тип завантажувача: бари. Ми візьмемо багато з того, що ми навчилися до цього часу, і подивимося, як ми можемо розширити їх, щоб створити ще один одноелементний завантажувач із якомога меншою кількістю коду та максимальною гнучкістю.

---

Завантажувачі одного елемента: точки спочатку опубліковано на CSS-трюки. Ти повинен отримати інформаційний бюлетень.

• Coinsmart. Найкраща в Європі біржа біткойн та криптовалют.
• Платоблокчейн. Web3 Metaverse Intelligence. Розширені знання. БЕЗКОШТОВНИЙ ДОСТУП.
• CryptoHawk. Альткойн Радар. Безкоштовне випробування.
• Джерело: https://css-tricks.com/single-element-loaders-the-dots/