Одноелементні навантажувачі: бруси

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

Почнемо не з одного, не з двох, а з 20 прикладів барних навантажувачів.

Що?! Ви збираєтеся детально описувати кожну з них? Це занадто для статті!

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

Давайте зробимо кілька батончиків!

Ми починаємо з визначення розмірів для них за допомогою width (Або height) з aspect-ratio щоб зберегти пропорції:

.bars { width: 45px; aspect-ratio: 1;
}

Ми ніби «підробили» три смужки з лінійним градієнтом на фоні — дуже схоже на те, як ми створювали точкові завантажувачі у Частині 2 цієї серії.

.bars { width: 45px; aspect-ratio: 1; --c: no-repeat linear-gradient(#000 0 0); /* we define the color here */ background: var(--c) 0% 50%, var(--c) 50% 50%, var(--c) 100% 50%; background-size: 20% 100%; /* 20% * (3 bars + 2 spaces) = 100% */
}

Наведений вище код дасть нам такий результат:

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

Анімація барів

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

@keyframes load { 0% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 1 */ 33% { background-size: 20% 10% , 20% 100%, 20% 100%; } /* 2 */ 50% { background-size: 20% 100%, 20% 10% , 20% 100%; } /* 3 */ 66% { background-size: 20% 100%, 20% 100%, 20% 10%; } /* 4 */ 100% { background-size: 20% 100%, 20% 100%, 20% 100%; } /* 5 */
}

Бачите, що там відбувається? Від 0% до 100% анімація змінюється background-size фонового градієнта елемента. Кожен ключовий кадр встановлює три розміри фону (по одному для кожного градієнта).

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

Чи можете ви почати уявляти всі можливі варіації, які ми можемо отримати, граючи з різними конфігураціями анімації для розмірів або позицій?

Давайте фіксуємо розмір до 20% 50% і оновіть позиції цього разу:

.loader { width: 45px; aspect-ratio: .75; --c: no-repeat linear-gradient(#000 0 0); background: var(--c), var(--c), var(--c); background-size: 20% 50%; animation: load 1s infinite linear;
}
@keyframes load { 0% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 1 */ 20% { background-position: 0% 50% , 50% 100%, 100% 100%; } /* 2 */ 40% { background-position: 0% 0% , 50% 50% , 100% 100%; } /* 3 */ 60% { background-position: 0% 100%, 50% 0% , 100% 50%; } /* 4 */ 80% { background-position: 0% 100%, 50% 100%, 100% 0%; } /* 5 */ 100% { background-position: 0% 100%, 50% 100%, 100% 100%; } /* 6 */
}

…що дає нам ще одного навантажувача!

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

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

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

Отримувати фантазію

Ви пам’ятаєте трюк з маскою, який ми робили з точковими завантажувачами друга стаття цієї серії? Ми можемо зробити те саме тут!

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

Давайте візьмемо одну демонстрацію та оновимо її:

Все, що я зробив, це все оновив background-* з mask-* і я додав градієнтне забарвлення. Так просто, але ми отримуємо ще один класний завантажувач.

Отже, немає різниці між крапками та смугами?

Без різниці! Я написав дві різні статті, щоб охопити якомога більше прикладів, але в обох я покладаюся на однакові методи:

1. Градієнти для створення фігур (крапки, смуги або, можливо, щось інше)
2. Анімація background-size та / або background-position щоб створити анімацію завантажувача
3. Маска додавання, щоб додати відтінок кольорів

Округлення брусків

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

Використання одного елемента і його ::before та ::after pseudos, визначаємо три однакові такти:

.loader { --s: 100px; /* control the size */ display: grid; place-items: center; place-content: center; margin: 0 calc(var(--s) / 2); /* 50px */
}
.loader::before,
.loader::after { content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after { height: var(--s); width: calc(var(--s) / 5); /* 20px */ border-radius: var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Це дає нам три смуги, цього разу без лінійного градієнта:

Тепер фокус полягає в тому, щоб заповнити ці смужки чудовим градієнтом. Щоб імітувати безперервний градієнт, нам потрібно пограти background властивості. На наведеному вище малюнку зелена зона визначає зону, яку покриває навантажувач. Ця область має бути розміром градієнта, і, якщо ми підрахуємо, це дорівнюватиме множенню обох сторін, позначених S на схемі, або background-size: var(--s) var(--s).

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

Для основного елемента (розміщеного в центрі) фон повинен бути в центрі. Ми використовуємо наступне:

.loader { /* etc. */ background: linear-gradient() 50% / var(--s) var(--s);
}

Для псевдоелемента зліва нам потрібен фон зліва

.loader::before { /* etc. */ background: linear-gradient() 0% / var(--s) var(--s);
}

А для псевдоправоруч фон потрібно розташувати праворуч:

.loader::after { background: linear-gradient() 100% / var(--s) var(--s);
}

Використовуючи ту саму змінну CSS, --_i, який ми використовували для перекладу, ми можемо написати код так:

.loader { --s: 100px; /* control the size */ --c: linear-gradient(/* etc. */); /* control the coloration */ display: grid; place-items: center; place-content: center;
}
.loader::before,
.loader::after{ content: ""; grid-area: 1/1;
}
.loader,
.loader::before,
.loader::after{ height: var(--s); width: calc(var(--s) / 5); border-radius: var(--s); background: var(--c) calc(50% + var(--_i, 0) * 50%) / var(--s) var(--s); transform: translate(calc(var(--_i, 0) * 200%));
}
.loader::before { --_i: -1; }
.loader::after { --_i: 1; }

Тепер все, що нам потрібно зробити, це анімувати висоту та додати деякі затримки! Ось три приклади, де відрізняються лише кольори та розміри:

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

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

До наступної статті я залишу вам кумедну колекцію навантажувачів, де я комбіную точки та бари!

---

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

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