Одноелементні навантажувачі: The Spinner

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

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

Для цієї першої статті ми збираємося створити один з найбільш поширених шаблонів завантажувача: пряди:

Ось такий підхід

Тривіальна реалізація цього завантажувача полягає в тому, щоб створити один елемент для кожної панелі, загорнутої всередину батьківського елемента (загалом для дев’яти елементів), а потім грати з opacity та transform щоб отримати ефект обертання.

Однак моя реалізація вимагає лише одного елемента:

<div class="loader"></div>

…і 10 декларацій CSS:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Давайте розберемо це

На перший погляд код може здатися дивним, але ви побачите, що він простіше, ніж ви думаєте. Першим кроком є ​​визначення розміру елемента. У нашому випадку це а 150px Майдан. Можемо поставити aspect-ratio використовувати, щоб елемент залишався квадратним незважаючи ні на що.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

Створюючи завантажувачі CSS, я завжди намагаюся мати одне значення для керування загальним розміром. У цьому випадку це width і всі розрахунки, які ми розглядаємо, будуть посилатися на це значення. Це дозволяє мені змінити одне значення для керування завантажувачем. Завжди важливо мати можливість легко регулювати розмір наших навантажувачів без необхідності налаштовувати багато додаткових значень.

Далі ми будемо використовувати градієнти для створення смуг. Це найскладніша частина! Давайте використовувати один градієнт для створення два бари, як показано нижче:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Наш градієнт визначається одним кольором і двома кольоровими зупинками. В результаті виходить однотонний колір без вицвітання або переходів. Розмір дорівнює 34% широкий і 8% високий. Він також розташований у центрі (50%). Хитрість полягає у використанні значення ключового слова space — це дублює градієнт, даючи нам дві смужки.

Від специфікація:

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

Я використовую ширину, рівну 34% це означає, що ми не можемо мати більше двох смуг (3*34% більше 100%), але з двома смужками ми матимемо порожні місця (100% - 2 * 34% = 32%). Цей простір розміщується в центрі між двома брусками. Іншими словами, ми використовуємо ширину для градієнта, який знаходиться між 33% та 50% щоб переконатися, що у нас є принаймні дві смуги з невеликим проміжком між ними. Значення space це те, що правильно розміщує їх для нас.

Ми робимо те ж саме і робимо другий подібний градієнт, щоб отримати ще дві смуги зверху і знизу, які дають нам a background вартість майна:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Ми можемо оптимізувати це, використовуючи змінну CSS, щоб уникнути повторення:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Отже, тепер у нас є чотири смужки, і завдяки змінним CSS ми можемо записати значення кольору один раз, що полегшить його оновлення пізніше (як ми зробили з розміром завантажувача).

Щоб створити решту панелей, торкніться .loader елемент і його ::before псевдоелемент, щоб отримати ще чотири такти, а всього вісім.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Зверніть увагу на використання display: grid. Це дозволяє нам покладатися на сітку за замовчуванням stretch вирівнювання, щоб псевдоелемент охоплював всю область свого батьківського елемента; таким чином, немає потреби вказувати на ньому вимір — ще один трюк, який зменшує код і уникає роботи з великою кількістю значень!

Тепер повернемо псевдоелемент на 45deg розташувати решту планок. Наведіть курсор на таку демонстрацію, щоб побачити трюк:

Встановлення непрозорості

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

mask: conic-gradient(from 22deg,#0003,#000);

Щоб краще зрозуміти трюк, давайте застосуємо це до повнокольорового поля:

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

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

Обертання

Давайте застосуємо анімацію обертання, щоб отримати наш завантажувач. Зауважте, що нам потрібна ступінчаста анімація, а не безперервна, тому я використовую steps(8). 8 є не що інше, як кількість стовпчиків, тому це значення можна змінити залежно від того, скільки стовпчиків використовується.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

Це воно! У нас є завантажувач лише з одним елементом і кількома рядками CSS. Ми можемо легко контролювати його розмір і колір, регулюючи одне значення.

Оскільки ми використовували лише ::before псевдоелемент, ми можемо додати ще чотири смужки за допомогою ::after закінчуватися на 12 тактів і майже однаковий код:

Ми оновлюємо обертання наших псевдоелементів для розгляду 30deg та 60deg замість 45deg використовуючи дванадцять кроків анімації, а не вісім. Я також зменшив висоту до 5% замість 8% щоб бруски були трохи тоншими.

Зауважте також, що у нас є grid-area: 1/1 на псевдоелементах. Це дозволяє нам розташовувати їх на одній ділянці один на одного, укладаючи один на одного.

Вгадай що? Ми можемо скористатися тим же завантажувачем, використовуючи іншу реалізацію:

Чи можете ви зрозуміти логіку коду? Ось підказка: непрозорість більше не обробляється CSS mask але всередині градієнта і також використовує opacity власність

Чому б не крапки?

Ми цілком можемо це зробити:

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

Нижче наведено малюнок для ілюстрації нової конфігурації градієнта:

Якщо ви користуєтеся Safari, зверніть увагу, що демо-версія може виявитися помилковою. Це тому, що наразі Safari не підтримує at синтаксис у радіальних градієнтах. Але ми можемо трохи змінити градієнт, щоб подолати це:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Більше прикладів завантажувачів

Ось ще одна ідея спінера-навантажувача, схожого на попередню.

Для цього я лише на нього покладаюся background та mask для створення форми (не потрібні псевдоелементи). Я також визначаю конфігурацію зі змінними CSS, щоб мати можливість створювати багато варіацій з одного і того ж коду — ще один приклад повноважень змінних CSS. Я написав ще одну статтю про цю техніку якщо ви хочете більше деталей.

Зауважте, що деякі браузери все ще покладаються на a -webkit- префікс для mask-composite зі своїм власним набором значень і не відображатиме спіннер у демонстрації. Ось спосіб зробити це без mast-composite для додаткової підтримки браузера.

У мене для вас є ще один:

Для цього я використовую a background-color для контролю кольору та використання mask та mask-composite щоб створити остаточну форму:

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

Підводячи підсумок

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

Це лише початок. У цій серії ми розглянемо більше ідей і розширених концепцій створення CSS-завантажувачів.

---

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

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