Одноэлементные загрузчики: стержни

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

Начнем не с одного и не с двух, а с 20 примеров штанговых погрузчиков.

Что?! Собираетесь ли вы подробно рассказать о каждом из них? Это слишком много для статьи!

Так может показаться на первый взгляд! Но все они основаны на одной и той же структуре кода, и мы обновляем лишь несколько значений для создания вариаций. Вот и вся сила CSS. Мы не учимся создавать один загрузчик, но изучаем различные методы, которые позволяют нам создавать столько загрузчиков, сколько мы хотим, используя одну и ту же структуру кода.

Давайте сделаем несколько баров!

Начнем с определения их размеров, используя width (или height) С aspect-ratio чтобы сохранить пропорцию:

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

Мы как бы «подделываем» три полосы с линейным градиентом на фоне — очень похоже на то, как мы создавали загрузчики точек во второй части этой серии.

.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 обман. Итак, если вы когда-нибудь почувствуете, что мы прыгаем слишком быстро или вам нужно немного больше деталей, пожалуйста, ознакомьтесь с ними. Вы также можете прочитать мой Ответ на переполнение стека, где я даю подробное объяснение о том, как все это работает.

Анимация полосок

Мы либо анимируем размер или положение элемента, чтобы создать загрузчик стержней. Давайте анимируем размер, определив следующие ключевые кадры анимации:

@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 псевдос, определяем три одинаковых бара:

.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-хитрости, Вам следует получить информационный бюллетень.

• Коинсмарт. Лучшая в Европе биржа биткойнов и криптовалют.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. БЕСПЛАТНЫЙ ДОСТУП.
• КриптоХок. Альткоин Радар. Бесплатная пробная версия.
• Источник: https://css-tricks.com/single-element-loaders-the-bars/