От автора: да, еще один пост о загрузчиках CSS, но на этот раз вы создадите загрузчик! В этой статье я поделюсь с вами несколькими приемами, которые я использую при создании своих загрузчиков.
Существует множество техник создания точек загрузки. Я остановлюсь на своем любимом — radial-gradient и фоновой анимации.
Что ж, еще один скучный урок, в котором у нас будет куча кода, сложные @keyframes и безумные задержки анимации, верно? Вовсе нет. В этом уроке у вас будет:
Один div
Один @keyframes
Без задержки и сложного расчета времени
Мы не будем делать одну анимацию, но многие из них будут использовать одну и ту же структуру кода
Не скучно, потому что эта статья закончится, прежде чем вы даже успеете моргнуть
1. Построение точки
Сначала мы создаем точку, используя следующий код:
.dot { background:radial-gradient(farthest-side,currentColor 90%,red); background-size:30px 30px; background-position:top center; background-repeat:no-repeat;
}
Логика проста: я создаю фоновый слой, имеющий размер равный 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. Наш код станет таким:
.dot { background:radial-gradient(farthest-side,currentColor 90%,#0000); background-size:30px 30px; background-position:top center; background-repeat:no-repeat; animation:m 1s infinite alternate;
}
@keyframes m{ to {background-position:bottom center}
}Я думаю, что приведенное выше говорит само за себя. Мы также можем преобразовать код, как показано ниже. Это упростит выполнение следующих шагов.
.dot { background:radial-gradient(farthest-side,currentColor 90%,#0000); background-size:30px 30px; background-repeat:no-repeat; animation:m 1s infinite alternate;
}
@keyframes m{ 0% {background-position:top center} 100% {background-position:bottom center}
}Теперь вы можете анимировать одну точку. Все, что вам нужно сделать, это обновить позиции так, как вы хотите. Позже я буду рассматривать процентные значения вместо ключевых слов, таких как top center (что эквивалентно 50% 0).
3. Добавление дополнительных точек
Чтобы добавить больше точек, мы просто добавляем несколько блоков, расположенных рядом друг с другом. Тогда у каждого будет свой фоновый слой, своя анимация @keyframes и … Конечно, НЕТ!
Чтобы добавить больше точек, мы просто добавляем больше фоновых слоев. У нас может быть столько слоев, сколько мы хотим, поэтому один div может содержать много точек! Попробуем:
.dot { background: radial-gradient(farthest-side,currentColor 90%,#0000), radial-gradient(farthest-side,currentColor 90%,#0000); background-size:30px 30px; background-repeat:no-repeat; animation:m 1s infinite alternate;
}
@keyframes m{ 0% {background-position:top left,bottom right} 100%{background-position:bottom left,top right}
}Одна точка будет анимирована от top left до bottom left, а другая от bottom right до top right. Так просто!
Обратите внимание, что я оставил только одно значение background-size, потому что все точки будут одинакового размера.
Оптимизируем код, используя переменную CSS и процентные значения:
.dot { --d:radial-gradient(farthest-side,currentColor 90%,#0000); background:var(--d),var(--d); background-size:30px 30px; background-repeat:no-repeat; animation:m 1s infinite alternate;
}
@keyframes m{ 0% {background-position:0 0 ,100% 100%} 100%{background-position:0 100%,100% 0 }
}Переменная –d предотвратит повторение одного и того же синтаксиса градиента. Для процентных значений это скорее предпочтение, чем оптимизация. Мне легче иметь дело со значениями, чем с ключевыми словами.
Вы уже моргнули? Нет проблем, потому что мы почти закончили. У нас есть все необходимое для создания любых точек загрузки.
4. Создание загрузчика
Чтобы создать загрузчик, вам сначала понадобятся ручка и бумага. Да я не шучу. Люди часто бросаются в свой любимый редактор кода и начинают писать код, пытаясь представить в голове, как все должно работать. Нет-нет, так не пойдет.
Вы помещаете все на бумагу, а затем переводите это в код.
Шаг 1: Определение структуры
На этом этапе мы определяем количество точек, их размер, промежутки и т.д. Итак, предположим, я буду использовать 4 точки размером 20×20 с зазором 5px. Это даст мне общую ширину 95px. Я не хочу, чтобы они подпрыгивали слишком высоко, поэтому давайте сделаем высоту 40px.
Шаг 2: Написание кода
Переводим то, что мы определили в (1), в код:
.dot { width:95px; height:40px; --d:radial-gradient(farthest-side,currentColor 90%,#0000); background:var(--d),var(--d),var(--d),var(--d); background-size:20px 20px; background-repeat:no-repeat;
}Пока, не беспокойтесь о результате. Вы увидите только одну точку, потому что все точки находятся друг над другом. Мы еще не определили 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.Код нашей анимации будет:
@keyframes m { ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 100%, calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 100%} ??%{background-position:calc(0*100%/3) 0 , calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 0 , calc(2*100%/3) 0 , calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 0 , calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 0 } ??%{background-position:calc(0*100%/3) 100%, calc(1*100%/3) 100%, calc(2*100%/3) 100%, calc(3*100%/3) 100%}
}На первый взгляд это может показаться сложным, но это очень просто. Внутри каждого кадра я определяю положение каждой точки. 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, Яндекс.Дзен