03.12.2021

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

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

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

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

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

Один div

Один @keyframes

Без задержки и сложного расчета времени

Мы не будем делать одну анимацию, но многие из их будут использовать одну и ту же структуру кода

Не скучновато, потому что эта статья закончится, до этого чем вы даже успеете моргнуть

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

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

CSS

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

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

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

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

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

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

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

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

CSS

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

CSS

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

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

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

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

CSS

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

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

CSS

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

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

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

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

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

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

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

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

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

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

CSS

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

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

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

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

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

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

Шаг 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.Код нашей анимации будет:

CSS

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

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

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

Вот и все! Сейчас сложите все вместе и наслаждайтесь:

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

Желаете еще примеров?

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

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

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

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

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

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *