Индикатор загрузки на чистом CSS
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Если у вас есть сайт, вам пригодится индикатор загрузки, чтобы пользователи, нажав на кнопку или ссылку, видели, что что-то происходит.
Этот компонент можно использовать во многих местах. При этом желательно, чтобы он был как можно проще.
В этой статье мы рассмотрим создание индикаторов загрузки двух типов. В обоих случаях мы будем использовать всего один html-элемент и несколько строк CSS-кода. Стоит отметить, что наши индикаторы будут настраиваемыми: вы запросто сможете создать множество их вариаций на основе одного и того же кода.
Как создать спиннер
В CodePen вы видите демо того, что мы создадим:
Здесь у нас четыре разных индикатора на основе одного кода. Благодаря изменению всего нескольких переменных мы можем генерировать новый индикатор, не прикасаясь к CSS-коду.
Переменные у нас следующие:
- —b задает толщину черточек
- —n — число черточек
- —g определяет промежутки между черточками. Поскольку у нас круговой элемент, это значение задается как угол.
- —c определяет цвет.
Вот эти переменные на картинке — для лучшего понимания:
Приступаем к CSS-коду. Для иллюстрации пошагового создания индикатора загрузки используем другую фигуру:
Тут пока ничего сложного. Обратите внимание на использование aspect-ratio . Это позволит менять всего одно значение при изменении размера индикатора.
Затем мы добавляем заливку с коническим градиентом от прозрачного до заданного цвета (переменная —c ):
На этом этапе мы вводим свойство mask , чтобы спрятать некоторые части круга (повторяющимся образом). Тут будут применяться переменные —n и —g .
Если вы присмотритесь к нашей фигуре, вы заметите следующий шаблон:
видимая часть невидимая часть видимая часть невидимая часть и т. д.
Чтобы достичь такого эффекта, мы используем repeating-conic-gradient(#000 0 X, #0000 0 Y) .
От 0 до X у нас непрозрачный цвет (видимая часть), а от X до Y — прозрачный (невидимая часть).
- Нам нужен промежуток, равный g , между видимыми частями, так что формула для видимых частей X и Y будет X = Y — g .
- Нам нужно n видимых частей, так что формула Y должна быть Y = 360deg/n . 360deg — это полный круг (360 градусов), который мы просто делим на n .
На данный момент у нас следующий код:
Следующий шаг самый заковыристый. Нам нужно применить еще одну маску, чтобы создать как бы отверстие в круге и таким образом получить итоговую форму.
Для этого мы используем radial-gradient() (что логично) с нашей переменной b :
radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)
Это полный круг, из которого мы вычитаем толщину линии, равную b .
Добавляем это к предыдущей маске:
Теперь у нас два масочных слоя, но результат не такой, как нам хотелось. Мы получили круг:
Выглядит странно, но на самом деле такой вид совершенно закономерен. «Финальная» видимая часть — не что иное, как сумма всех видимых частей каждого масочного слоя. Это поведение можно изменить при помощи mask-composite . Об этом свойстве стоит написать отдельную статью, так что здесь я просто приведу значение.
В нашем случае нам нужно значение intersect (и destination-out для того же свойства с префиксом). Код становится таким:
С этой фигурой покончено! Только вот индикатор пока без анимации, а должно быть бесконечное вращение.
Обращаю ваше внимание, что для создания иллюзии неподвижных черточек с движущимися цветами я использовал анимацию steps .
Вот иллюстрация, чтобы вы могли понять разницу:
Первый вариант индикатора сделан при помощи линейной анимации (linear). При этом бесконечно вращается сама фигура (это не то, чего бы нам хотелось).
Во втором варианте анимация прерывистая (как нам и нужно).
Вот полный код, включая анимацию:
Вы заметите, что тут кое-что отличается от моих объяснений:
- Я добавил padding: 1px и установил content-box в background
- Здесь есть +/1deg между цветами repeating-conic-gradient()
- Также здесь несколько процентов разницы между цветами внутри radial-gradient()
Это небольшие правки для исправления визуальных помех. Градиенты известны тем, что порой производят «странные» результаты. Во избежание этого приходится подгонять некоторые значения вручную.
Как создать индикатор прогресса загрузки
Как и с первым индикатором, давайте начнем с обзора:
У нас здесь та же конфигурация, что в предыдущем индикаторе. CSS-переменные для управления лоадером:
- —n определяет число черточек/полосок
- —s определяет ширину каждой полоски
- —g задает пробел между полосками
Мы видим, что ширина всего элемента зависит от трех переменных. Наш CSS-код будет следующим:
Для создания промежутков со всех сторон мы используем padding . Наша ширина будет равна числу полосок, умноженному на ширину полосок, плюс промежутки. Один промежуток мы удаляем, потому что при N полосок у нас N-1 промежутков между ними.
Для создания полосок мы используем следующий градиент:
repeating-linear-gradient(90deg, currentColor 0 var(--s), #0000 0 calc(var(--s) + var(--g)) )
Здесь от 0 до s — заданный цвет, а от s до s + g — прозрачный цвет (промежуток).
currentColor , который я использую, это значение свойства color . Обратите внимание, что я не определял никакой цвет внутри border , так что здесь тоже будет использоваться значение color .
Благодаря использованию content-box градиент не закроет зону padding .
Затем я определяю размер как 100% 100% и позицию left.
В этом индикаторе мы будем анимировать background-size от 0% 100% до 100% 100% , т. е. ширину нашего градиента от 0% до 100%.
Как и в предыдущем случае, мы применим steps() , чтобы получить не плавную, а прерывистую анимацию.
Чтобы добиться такого эффекта, как на второй картинке, добавим следующий код:
Присмотревшись к нашей гифке, вы заметите, что анимация неполная. Мы пропускаем одну полоску в конце, хотя используем N . Это не баг, именно так и работает steps() .
Чтобы это исправить, нужно добавить дополнительный шаг. Мы увеличим background-size нашего градиента, чтобы там было N+1 полосок, и используем steps(N+1) .
В итоге наш код будет выглядеть так:
Обратите внимание, что ширина градиента равна N+1 , умноженному на ширину одной полоски, плюс промежутки (вместо 100%).
Как сделать лоадер css
Создание игр на Unreal Engine 5
Данный курс научит Вас созданию игр на Unreal Engine 5. Курс состоит из 12 модулей, в которых Вы с нуля освоите этот движок и сможете создавать самые разные игры.
В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров. Дополнительно, почти к каждому уроку идут упражнения для закрепления материала.
Помимо самого курса Вас ждёт ещё 8 бесплатных ценных Бонусов: «Chaos Destruction», «Разработка 2D-игры», «Динамическая смена дня и ночи», «Создание динамической погоды», «Создание искусственного интеллекта для NPC», «Создание игры под мобильные устройства», «Создание прототипа RPG с открытым миром» и и весь курс «Создание игр на Unreal Engine 4» (актуальный и в 5-й версии), включающий в себя ещё десятки часов видеоуроков.
Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.
Подписаться
Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.
Подписаться
Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.
Мой аккаунт Моя группа
Как сделать лоадер css
Now, let’s try to add more color to this ring.
Step-6
Adding more colors to the ring.
This can be done by again using the border property. Previously, we added the red color using the border-top property inside the .ring class. Now, let’s add color to the other parts inside the ring’s border-bottom, border-left, and border-right properties.
Inside the tag, in the .ring class add the following CSS properties.
border-bottom: 20px solid #4285f4; /* blue */ border-right: 20px solid #fbbc05; /* yellow */ border-left:20px solid #34a853; /* green */We will also update the red color to the #eb4335; hex color.
border-top: 20px solid #eb4335; /* red */The complete code for the updated colors is below.
Please wait.
You don’t have to change anything else.
You can even use multiple page loaders. I will use the above two rings to give you a practical illustration.
All you need to do is create another class for another ring or page loader.
Use .ring1 class for the first ring and .ring2 for the second ring.
Please wait.
Conclusion
I hope this article will assist you in creating a page loader. A page loader helps make your site more responsive and keeps the visitors entertained by showing them animations. CSS animations can reduce browser load because they do not require an image request, unlike the GIF.