Создайте свой загрузчик CSS только с одним div

От автора: да, еще один пост о загрузчиках CSS, но на этот раз вы создадите загрузчик! В этой статье я поделюсь с вами несколькими приемами, которые я использую при создании своих загрузчиков.

Существует множество техник создания точек загрузки. Я остановлюсь на своем любимом — radial-gradient и фоновой анимации.

Что ж, еще один скучный урок, в котором у нас будет куча кода, сложные @keyframes и безумные задержки анимации, верно? Вовсе нет. В этом уроке у вас будет:

1. Построение точки

Сначала мы создаем точку, используя следующий код:

Логика проста: я создаю фоновый слой, имеющий размер равный 30×30, размещенный в top center и отключаю повторение, чтобы иметь только один экземпляр. Этот слой radial-gradient() имеет два цвета: цвет currentColor, который вы определяете в свойстве color (полезно для обновления расцветки точки), и цвет transparent (я использую красный, чтобы четко видеть предел градиентного слоя).

farthest-side позволяет мне определить самую дальнюю сторону для моей процентной ссылки, и поскольку мы имеем дело с квадратным градиентом (30×30), все стороны являются самыми дальними, поэтому, используя currentColor 100%, я рисую круг, который касается сторон. Я не использовал сложного значения, такого как 66% или 72.5%.
Но вы используете 90%, а не 100%!

Верно, и это связано с тем, что градиент не сглаживает, поэтому мы должны учитывать меньшее значение, чтобы иметь гладкий край. Ниже разница между 90% и 100%:

Это все! Теперь у нас есть точка, давайте ее анимируем.

2. Анимация точки

Чтобы анимировать точку, мы просто анимируем background-position. Давайте создадим, @keyframes который обновит позицию с top center на bottom center. Наш код станет таким:

Я думаю, что приведенное выше говорит само за себя. Мы также можем преобразовать код, как показано ниже. Это упростит выполнение следующих шагов.

Теперь вы можете анимировать одну точку. Все, что вам нужно сделать, это обновить позиции так, как вы хотите. Позже я буду рассматривать процентные значения вместо ключевых слов, таких как top center (что эквивалентно 50% 0).

3. Добавление дополнительных точек

Чтобы добавить больше точек, мы просто добавляем несколько блоков, расположенных рядом друг с другом. Тогда у каждого будет свой фоновый слой, своя анимация @keyframes и … Конечно, НЕТ!

Чтобы добавить больше точек, мы просто добавляем больше фоновых слоев. У нас может быть столько слоев, сколько мы хотим, поэтому один div может содержать много точек! Попробуем:

Одна точка будет анимирована от top left до bottom left, а другая от bottom right до top right. Так просто!
Обратите внимание, что я оставил только одно значение background-size, потому что все точки будут одинакового размера.

Оптимизируем код, используя переменную CSS и процентные значения:

Переменная –d предотвратит повторение одного и того же синтаксиса градиента. Для процентных значений это скорее предпочтение, чем оптимизация. Мне легче иметь дело со значениями, чем с ключевыми словами.

Вы уже моргнули? Нет проблем, потому что мы почти закончили. У нас есть все необходимое для создания любых точек загрузки.

4. Создание загрузчика

Чтобы создать загрузчик, вам сначала понадобятся ручка и бумага. Да я не шучу. Люди часто бросаются в свой любимый редактор кода и начинают писать код, пытаясь представить в голове, как все должно работать. Нет-нет, так не пойдет.

Вы помещаете все на бумагу, а затем переводите это в код.

Шаг 1: Определение структуры

На этом этапе мы определяем количество точек, их размер, промежутки и т.д. Итак, предположим, я буду использовать 4 точки размером 20×20 с зазором 5px. Это даст мне общую ширину 95px. Я не хочу, чтобы они подпрыгивали слишком высоко, поэтому давайте сделаем высоту 40px.

Шаг 2: Написание кода

Переводим то, что мы определили в (1), в код:

Пока, не беспокойтесь о результате. Вы увидите только одну точку, потому что все точки находятся друг над другом. Мы еще не определили background-position.

Шаг 3: Создание временной шкалы

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

Вот пример, в котором моя анимация будет перемещать все точки снизу вверх одну за другой, а затем перемещать их обратно вниз.

У меня 9 кадров, и важно отметить, что последний такой же, как и первый, с непрерывной анимацией.

Шаг 4: Перевод временной шкалы в background-position

Теперь, когда у вас есть рисунок, просто определите background-position для каждого кадра. Для каждой точки у нас есть фиксированная координата X, будет изменятся только Y.

Для X мы имеем следующие значения: 0%, 33%, 66%, 100%. Это не очень интуитивно так что давайте использовать другой синтаксис: calc(0*100%/3), calc(1*100%/3), calc(2*100%/3), calc(3*100%/3). Логика проста: N точек, поэтому мы выполняем цикл от 0 до N-1и делим на N-1.Код нашей анимации будет:

На первый взгляд это может показаться сложным, но это очень просто. Внутри каждого кадра я определяю положение каждой точки. X всегда один и тот же, и я обновляю Y от 0% (вверху) до 100% (внизу). У нас есть свои @keyframes!

Шаг 5: Нахождение процента кейфреймов

Последний шаг — заполнить ?? процентными значениями. У нас есть 9 кадров, поэтому мы рассматриваем 8 (всегда N-1) и делим 100% на 8 чтобы получить 12.5%. Мы начинаем с 0% и увеличиваем на 12.5% пока не достигнем 100%.

Вот и все! Теперь сложите все вместе и наслаждайтесь:

Единственное ограничение этой техники — ваше воображение.

Хотите еще примеров?

Хорошо, давайте сделаем еще два.

На этот раз я буду рассматривать 3 точки (всегда одного размера), и движение каждой из них: по центру -> сверху -> снизу -> по центру. Обратите внимание на стрелки на моем рисунке. Значит, мне нужна alternate анимация.

Загрузчик на 4 точки, где я также обновлю координату X.

Думаю, идея вам понятна. Теперь ваша очередь создать загрузчик CSS или, что еще лучше, полную коллекцию загрузчиков!

Автор: Temani Afif

Источник: dev.to

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Комментарии Вконтакте:

Комментарии запрещены.