Перевод статьи
В предыдущей статье я показал вам, как создать два типа загрузчиков CSS: счетчик и индикатор выполнения. В этой статье вы узнаете о другом варианте, который называется заполняющим загрузчиком CSS.
Я думаю, демо стоит тысячи слов, поэтому ознакомьтесь с этим Codepen.
В приведенном выше примере я показываю вам четыре разных загрузчика CSS-loaders, но мы можем сделать еще больше. Вы можете просмотреть эту коллекцию, которую я создал, и увидеть более 20 различных загрузчиков.
Вы можете подумать, что статья будет очень длинной — я имею в виду, сколько времени потребуется, чтобы объяснить, как создать 20 различных загрузчиков CSS?
Не волнуйтесь, этот урок будет очень быстрым, потому что я покажу несколько приемов CSS, которые помогут вам создать столько вариантов, сколько захотите. Загрузчики выглядят по-разному, но все они используют одни и те же методы. Просто изменив несколько настроек, вы можете получить совершенно новый загрузчик.
Начальная конфигурация загрузчика
Как и все загрузчики CSS, которые я создаю, HTML-код прост и состоит из одного элемента. Ничего больше! Вот как это выглядит:
Затем мы применяем следующий CSS:
Пока ничего особенного. Делаем текст прозрачным и добавляем к нему черную обводку. Вот как это выглядит:
-webkit-text-stroke по-прежнему помечен как экспериментальный, но он хорошо поддерживается браузерами, поэтому вы сможете использовать его без каких-либо проблем. Тем не менее, всегда полезно протестировать свой код в разных браузерах, чтобы убедиться, что все работает нормально.
Как заполнить текст цветом
Теперь пришло время заполнить наш текст (вот почему этот метод называется «Заполнение CSS-loaders»!). Для этого мы будем использовать градиенты и background-clip: text. Вот код:
Или сокращенную версию, если вы предпочитаете более компактный код:
На рисунке выше показана разница между использованием или неиспользованием background-clip: text. Совершенно очевидно, что левый результат — это то, к чему мы стремимся. Мы ограничиваем цвет фона только текстом, а не всем элементом.
conic-gradient(#000 0 0) выглядит странно, не так ли? Это позволяет вам использовать одноцветный градиент. Я написал небольшой совет по этому поводу, который предлагаю вам прочитать, чтобы понять, почему мы используем именно этот синтаксис в этой статье «Как правильно определить одноцветный градиент».
Как создать CSS-loader
Хотите верьте, хотите нет, но мы почти закончили, потому что у нас есть все необходимое для создания CSS-loaders. Для первого загрузчика мы просто анимируем background-size следующим образом:
Мы начинаем с ширины, равной 0%, пока не достигнем ширины, равной 120%. Я мог бы использовать 100 %, но хочу, чтобы полная окраска сохранялась дольше, поэтому я использую значение больше 100 %. Что касается высоты (второе значение размера фона), то она остается равной 100%.
Второй загрузчик использует ту же анимацию, но вместо функции линейного времени мы используем steps(), чтобы получить дискретную анимацию.
Текст содержит 7 символов, поэтому мы используем 8 шагов (N + 1), а background-size должен достигать 800%/7 ((N + 1)*100%/N). Я также использую моноширинный шрифт, чтобы все символы имели одинаковую ширину.
Это, по сути, основная хитрость. Анимируя свойства фона, мы создаем различные виды загрузчиков. Это либо background-size, как предыдущие, либо background-position, как показано ниже:
Можете ли вы понять, как они работают, прежде чем проверять мой код? Это будет ваше первое домашнее задание!
Как использовать несколько градиентов
Одного градиента достаточно, чтобы создать множество вариаций, но мы сможем сделать еще больше, если введем несколько градиентов. Если вы проверите четвертый загрузчик первой демонстрации, вы увидите, что я использую семь градиентов — по одному градиенту на символ.
Я использую тот же градиент, поэтому мы учитываем переменную CSS --g, чтобы избежать повторения. Затем я вызываю эту переменную 7 раз внутри свойства фона. Все градиенты имеют одинаковую позицию Y (внизу), но разную позицию X. Вот почему вы видите 0, 1ch, 2ch,…,6ch.
Теперь, если вы посмотрите на анимацию, я просто анимирую высоту каждого градиента индивидуально. При 0% все они имеют высоту, равную 0. Затем я обновляю их высоту одну за другой, пока все они не достигнут 100%. Ширина не меняется — она всегда равна 1ch (ширина одного символа).
На первый взгляд это может показаться сложным, но если вы подумаете об этом по одному градиенту за раз, это довольно просто.
А как насчет третьего загрузчика, спросите вы? В этом случае я воспользуюсь своим онлайн-генератором волнистых фигур для создания конфигурации градиента.
Затем я анимирую background-position.
Этот, вероятно, немного сложнее, но это еще один пример, иллюстрирующий все возможности. От простой конфигурации градиента до самой сложной — мы можем создать столько загрузчиков, сколько захотим.
А как насчет создания собственного загрузчика CSS? Вы можете использовать то, что узнали из статьи, и попробовать создать загрузчик, которого нет в моей коллекции. Лучший способ учиться — это практиковаться, так что попробуйте!
Заключение
Создавая несколько крутых загрузчиков, мы использовали множество трюков CSS, связанных с градиентами и фоном. Даже если создание загрузчиков не является вашей целью, вы всегда можете использовать те же приемы, чтобы сделать что-то еще.
Не забудьте заглянуть в мой блог «Советы по CSS», где я делюсь крутыми трюками и демонстрациями CSS.