Загрузчики отдельных элементов: точки

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

Точечные загрузчики повсюду. Они аккуратны, потому что обычно состоят из трех точек, которые выглядят как текстовое многоточие (…), которое танцует вокруг.

Наша цель — сделать то же самое из одного элемента div. Другими словами, нет ни одного div для каждой точки, ни отдельных анимаций для каждой точки.

Приведенный выше пример загрузчика состоит из одного элемента div, нескольких объявлений CSS и без псевдоэлементов. Я комбинирую две техники с помощью CSS background и mask. И когда мы закончим, мы увидим, как анимация фонового градиента помогает создать иллюзию изменения цвета каждой точки при последовательном движении вверх и вниз.

Фоновая анимация

Начнем с фоновой анимации:

.loader { width: 180px; /* this controls the size */ aspect-ratio: 8/5; /* maintain the scale */ background: conic-gradient(red 50%, blue 0) no-repeat, /* top colors */ conic-gradient(green 50%, purple 0) no-repeat; /* bottom colors */ background-size: 200% 50%; animation: back 4s infinite linear; /* applies the animation */
} /* define the animation */
@keyframes back { 0%, /* X Y , X Y */ 100% { background-position: 0% 0%, 0% 100%; } 25% { background-position: 100% 0%, 0% 100%; } 50% { background-position: 100% 0%, 100% 100%; } 75% { background-position: 0% 0%, 100% 100%; }
}

Я надеюсь, что это выглядит довольно просто. У нас есть 180px-широкий .loader элемент, который показывает два конических градиента с жесткими цветовыми точками между двумя цветами каждый — первый градиент красный и синий вдоль верхней половины .loader, а второй градиент — зеленый и фиолетовый вдоль нижней половины.

Размер фона загрузчика (200% широкий), мы видим только один из этих цветов в каждой половине за раз. Затем у нас есть небольшая анимация, которая перемещает положение этих фоновых градиентов влево, вправо и обратно навсегда.

При работе со свойствами фона — особенно background-position — я всегда обращаюсь к своему Ответ переполнения стека, где я даю подробное объяснение о том, как все это работает. Если вам не нравится обман фона CSS, я настоятельно рекомендую прочитать этот ответ, чтобы помочь с тем, что будет дальше.

В анимации обратите внимание, что первый слой Y=0% (помещены вверху) в то время как X изменяется от 0% в 100%. Для второго слоя имеем то же самое для X но Y=100% (размещается внизу).

Зачем использовать conic-gradient() вместо linear-gradient()?

Хороший вопрос! Интуитивно мы должны использовать линейный градиент для создания двухцветных градиентов, подобных этому:

linear-gradient(90deg, red 50%, blue 0)

Но мы также можем достичь того же, используя conic-gradient() — и с меньшим количеством кода. Сокращаем код, а также учимся новому трюку в процессе!

Сдвигание цветов влево и вправо — хороший способ создать впечатление, что мы меняем цвета, но может быть лучше, если мы вместо этого изменим цвета мгновенно — таким образом, нет шансов, что точка загрузки замигает двумя цветами одновременно. . Для этого изменим animationвременная функция от linear в steps(1)

Загрузчик точек

Если вы следовали вместе с первая статья из этой серии, я уверен, вы знаете, что будет дальше: CSS-маски! Что делает маски такими замечательными, так это то, что они позволяют нам как бы «вырезать» части фона в форме другого элемента. Итак, в этом случае мы хотим сделать несколько точек, показать фоновые градиенты через точки и вырезать любые части фона, которые не являются частью точки.

Мы собираемся использовать radial-gradient() для этого:

.loader { width: 180px; aspect-ratio: 8/5; mask: radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat, radial-gradient(#000 68%, #0000 71%) no-repeat; mask-size: 25% 40%; /* the size of our dots */
}

Там есть некоторый дублированный код, поэтому давайте создадим переменную CSS, чтобы уменьшить его:

.loader { width: 180px; aspect-ratio: 8/5; --_g: radial-gradient(#000 68%, #0000 71%) no-repeat; mask: var(--_g),var(--_g),var(--_g); mask-size: 25% 40%;
}

Классно классно. Но теперь нам нужна новая анимация, которая помогает перемещать точки вверх и вниз между анимированными градиентами.

.loader { /* same as before */ animation: load 2s infinite;
} @keyframes load { /* X Y, X Y, X Y */ 0% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */ 16.67% { mask-position: 0% 100%, 50% 0% , 100% 0%; } 33.33% { mask-position: 0% 100%, 50% 100%, 100% 0%; } 50% { mask-position: 0% 100%, 50% 100%, 100% 100%; } /* all of them at the bottom */ 66.67% { mask-position: 0% 0% , 50% 100%, 100% 100%; } 83.33% { mask-position: 0% 0% , 50% 0% , 100% 100%; } 100% { mask-position: 0% 0% , 50% 0% , 100% 0%; } /* all of them at the top */
}

Да, всего здесь три радиальных градиента, все с одинаковой конфигурацией и одинаковым размером — анимация обновит положение каждого из них. Обратите внимание, что X координата каждой точки фиксирована. mask-position определяется таким образом, что первая точка находится слева (0%), второй в центре (50%), и третий справа (100%). Мы только обновляем Y координировать от 0% в 100% заставить точки танцевать.

Вот что мы получаем:

Теперь объедините это с нашей градиентной анимацией, и волшебство начнет происходить:

Варианты загрузчика точек

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

Как насчет другого движения для наших точек?

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

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

Почему не загрузчик с одной точкой?

Это должно быть довольно легко понять, так как я использую ту же технику, но с более простой логикой:

Вот еще один пример загрузчика, где я также анимирую radial-gradient в сочетании с CSS фильтры и mix-blend-mode чтобы создать эффект пятна:

Если вы проверите код, то увидите, что на самом деле все, что я там делаю, — это анимация background-position, точно так же, как и с предыдущим загрузчиком, но с добавлением тире background-size чтобы казалось, что капля становится больше по мере того, как она поглощает точки.

Если вы хотите понять магию этого эффекта блоба, вы можете обратиться к эти интерактивные слайды (только для Chrome) от Ана Тюдор потому что она так хорошо освещает тему!

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

Здесь всего 10 объявлений CSS и ключевой кадр. Основной элемент и два его псевдоэлемента имеют одинаковую конфигурацию фона с одним радиальным градиентом. Каждый создает одну точку, всего три. Анимация перемещает градиент сверху вниз, используя разные задержки для каждой точки.

О, и обратите внимание, как в этой демонстрации используется CSS Grid. Это позволяет нам использовать сетку по умолчанию stretch выравнивание так, чтобы оба псевдоэлемента покрывали всю область своего родителя. Размер не нужен! Немного подтолкните вокруг с translate() и все готово.

Больше примеров!

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

Следующий…

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

---

Загрузчики отдельных элементов: точки первоначально опубликовано CSS-хитрости, Вам следует получить информационный бюллетень.

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