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

Создание загрузчиков только на CSS — одна из моих любимых задач. Всегда приятно смотреть на эти бесконечные анимации. И, конечно же, есть много приемов и подходов к их изготовлению — не нужно смотреть дальше, чем CodePen чтобы увидеть, сколько. Однако в этой статье мы увидим, как сделать загрузчик одного элемента, написав как можно меньше кода.

У меня есть собрал коллекцию из более чем 500 одиночных загрузчиков div и в этой серии из четырех частей я поделюсь приемами, которые я использовал для создания многих из них. Мы рассмотрим огромное количество примеров, показывающих, как небольшие корректировки могут привести к забавным вариациям, и как мало кода нам нужно написать, чтобы все это произошло!

Для этой первой статьи мы собираемся создать один из наиболее распространенных шаблонов загрузчика: вращающиеся полосы:

Вот подход

Тривиальная реализация для этого загрузчика состоит в том, чтобы создать один элемент для каждого бара, обернутого внутри родительского элемента (всего девять элементов), а затем поиграть с opacity и transform чтобы получить эффект вращения.

Моя реализация, однако, требует только одного элемента:

<div class="loader"></div>

…и 10 объявлений CSS:

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid; mask: conic-gradient(from 22deg, #0003, #000); animation: load 1s steps(8) infinite;
}
.loader,
.loader:before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader:before { content: ""; transform: rotate(45deg);
}
@keyframes load { to { transform: rotate(1turn); }
}

Давайте сломаем это

На первый взгляд код может показаться странным, но вы увидите, что он проще, чем вы думаете. Первым шагом является определение размера элемента. В нашем случае это 150px площадь. Мы можем поставить aspect-ratio использовать, чтобы элемент оставался квадратным, несмотря ни на что.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; /* make height equal to width */
}

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

Далее мы будем использовать градиенты для создания полос. Это самая сложная часть! Давайте использовать one градиент для создания два бары, как показано ниже:

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat;

Наш градиент определяется одним цветом и двумя точками цвета. В результате получается сплошной цвет без выцветания или переходов. Размер равен 34% широкий и 8% высокий. Он также расположен в центре (50%). Хитрость заключается в использовании значения ключевого слова space — это дублирует градиент, давая нам всего две полосы.

от спецификация:

Изображение повторяется так часто, как это может поместиться в области позиционирования фона, без обрезки, а затем изображения распределяются так, чтобы заполнить область. Первое и последнее изображения касаются краев области.

Я использую ширину, равную 34% что означает, что у нас не может быть более двух баров (3*34% больше 100%), но с двумя полосами у нас будут пустые места (100% - 2 * 34% = 32%). Это пространство помещается в центре между двумя полосами. Другими словами, мы используем ширину градиента, которая находится между 33% и 50% чтобы убедиться, что у нас есть по крайней мере два столбца с небольшим пространством между ними. Значение space это то, что правильно размещает их для нас.

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

background: linear-gradient(#17177c 0 0) 50%/34% 8% space no-repeat, linear-gradient(#17177c 0 0) 50%/8% 34% no-repeat space;

Мы можем оптимизировать это, используя переменную CSS, чтобы избежать повторения:

--_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */
background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;

Итак, теперь у нас есть четыре полосы, и благодаря переменным CSS мы можем записать значение цвета один раз, что упрощает его обновление позже (как мы сделали с размером загрузчика).

Чтобы создать оставшиеся полосы, коснитесь .loader элемент и его ::before псевдоэлемент, чтобы получить еще четыре такта, всего восемь.

.loader { width: 150px; /* control the size */ aspect-ratio: 1; display: grid;
}
.loader,
.loader::before { --_g: linear-gradient(#17177c 0 0) 50%; /* update the color here */ background: var(--_g)/34% 8% space no-repeat, var(--_g)/8% 34% no-repeat space;
}
.loader::before { content: ""; transform: rotate(45deg);
}

Обратите внимание на использование display: grid. Это позволяет нам полагаться на значение сетки по умолчанию. stretch выравнивание, чтобы псевдоэлемент покрывал всю область своего родителя; таким образом, нет необходимости указывать для него измерение — еще один трюк, который сокращает код и избавляет нас от необходимости иметь дело с большим количеством значений!

Теперь давайте повернем псевдоэлемент на 45deg для размещения оставшихся полос. Наведите курсор на следующую демонстрацию, чтобы увидеть трюк:

Настройка прозрачности

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

mask: conic-gradient(from 22deg,#0003,#000);

Чтобы лучше увидеть трюк, давайте применим это к полноцветному блоку:

Прозрачность красного цвета постепенно увеличивается по часовой стрелке. Мы применяем это к нашему загрузчику, и у нас есть полосы с разной непрозрачностью:

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

Вращение

Давайте применим анимацию вращения, чтобы получить наш загрузчик. Обратите внимание, что нам нужна ступенчатая анимация, а не непрерывная, поэтому я использую steps(8). 8 это не что иное, как количество баров, так что это значение может быть изменено в зависимости от того, сколько баров используется.

.loader { animation: load 3s steps(8) infinite;
} /* Same as before: */
@keyframes load { to { transform: rotate(1turn) }
}

Вот и все! У нас есть наш загрузчик только с одним элементом и несколькими строками CSS. Мы можем легко контролировать его размер и цвет, регулируя одно значение.

Поскольку мы использовали только ::before псевдоэлемент, мы можем добавить еще четыре такта, используя ::after чтобы закончить всего 12 барами и почти таким же кодом:

Мы обновляем вращение наших псевдоэлементов, чтобы учесть 30deg и 60deg вместо 45deg при использовании двенадцатиступенчатой ​​анимации, а не восьмиступенчатой. Я также уменьшил высоту до 5% вместо 8% сделать полоски немного тоньше.

Заметьте также, что у нас есть grid-area: 1/1 на псевдоэлементах. Это позволяет нам размещать их в одной области друг с другом, укладывая друг на друга.

Угадай, что? Мы можем получить тот же загрузчик, используя другую реализацию:

Можете ли вы понять логику кода? Вот подсказка: непрозрачность больше не обрабатывается с помощью CSS. mask но внутри градиента и также использует opacity имущество.

Почему не точки?

Мы вполне можем это сделать:

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

Ниже приведен рисунок, иллюстрирующий новую конфигурацию градиента:

Если вы используете Safari, обратите внимание, что в демоверсии могут быть ошибки. Это связано с тем, что Safari в настоящее время не поддерживает at синтаксис в радиальных градиентах. Но мы можем немного перенастроить градиент, чтобы преодолеть это:

.loader,
.loader:before,
.loader:after { background: radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) 50% -150%/20% 80% repeat-y, radial-gradient( circle closest-side, currentColor 90%, #0000 98% ) -150% 50%/80% 20% repeat-x;
}

Еще примеры загрузчиков

Вот еще одна идея для загрузчика спиннера, похожая на предыдущую.

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

Обратите внимание, что некоторые браузеры по-прежнему полагаются на -webkit- префикс для mask-composite со своим собственным набором значений и не будет отображать счетчик в демоверсии. Вот как это сделать без mast-composite для дополнительной поддержки браузера.

У меня есть еще один для вас:

Для этого я использую background-color для управления цветом и использования mask и mask-composite для создания окончательной формы:

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

Подведение итогов

Видите, сколько всего можно сделать в CSS, используя только один элемент div, пару градиентов, псевдоэлементы и переменные. Кажется, что мы создали целую кучу разных спиннинговых загрузчиков, но все они в основном одно и то же с небольшими изменениями.

Это только начало. В этой серии мы рассмотрим больше идей и продвинутых концепций для создания загрузчиков CSS.

---

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

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