Как сделать полоску загрузки в css

Как создать анимацию загрузки заполнителя в CSS

Оптимизация воспринимаемого времени загрузки за счет создания каркасов контента

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

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

Как каркасные загрузчики улучшают воспринимаемую производительность

Хороший пример предполагаемого повышения производительности — загрузчики Skeleton. Скелет-загрузчик может действовать как заполнитель для информации, которая все еще загружается, помогая пользователю сосредоточиться на ходе выполнения, а не на времени ожидания. Это подчеркивает дизайнер Google Люк Вроблевски :

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

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

Скелетные экраны, которые используют движение, которое перемещается слева направо, воспринимаются как более короткие по продолжительности, чем скелеты, которые пульсируют (непрозрачность постепенно увеличивается и уменьшается)

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

И в итоге получится:

Объяснение анимации

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

Когда мы думаем о движении, мы обычно должны стремиться к продолжительности где-то между 300-500 мс . Все, что меньше этой продолжительности, анимация становится слишком быстрой для восприятия; все, что указано выше, может показаться вялым, заставляя пользователей думать, что они ждут большего, чем они есть на самом деле. Также важно отметить, что чем сложнее и крупнее анимация, тем медленнее она должна быть.

На приведенном выше гифке анимация занимает более 2 секунд, из-за чего производительность приложения замедляется. Поэтому мы пойдем на меньшую продолжительность. Однако из-за его больших размеров мы все равно можем закончить более 500 мс.

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

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

Анимация градиента

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

  • Исходное положение: градиент расположен вне поля зрения, его правая сторона касается начала фиксированного контейнера.
  • Начать с отрицательного смещения : положение градиента начинается с отрицательного значения, соответствующего его ширине. Итак, если ширина градиента составляет 150 пикселей, его начальное значение будет left: -150px; .
  • Скрыть градиент : чтобы предотвратить его отображение вне контейнера, нам также необходимо указать overflow: hidden; .
  • Сбросить анимацию : после завершения анимации положение градиента сбрасывается на начало.

Со стороны HTML мы будем работать только с одним элементом-заполнителем. Будь как будет:

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

Важные правила, определенные выше, — это последние две строки. Мы разместим ::before элемент абсолютно в его контейнере, поэтому элемент-заполнитель должен иметь relative позицию и overflow установить значение hidden . Это предотвратит отображение градиента за пределами нашего элемента-заполнителя. Переходим к ::before псевдоэлементу:

Использование псевдоэлемента

Давайте проанализируем этот код псевдоэлемента:

  • Как видите, поскольку ширина градиента составляет 150 пикселей, его начальное значение должно быть -150 пикселей слева.
  • Еще одна важная часть — свойство фона. Вы хотите перейти от прозрачного к прозрачному, чтобы идеально смешать его с фоном контейнера. Цвет градиента указан точно на 50%.
  • А для load анимации вам нужно изменить left свойство:

Резюме

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

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

Какие анимации вам нравятся при загрузке? Дайте нам знать об этом в комментариях. Спасибо за уделенное время.

Как использовать и стилизовать полосу загрузки в HTML5

Как использовать и стилизовать полосу загрузки в HTML5

От автора: В HTML5 появился новый элемент – progress, который работает также, как и обычная полоса загрузки (progress bar), и используется для того, чтобы визуализировать процесс выполнения определенной задачи, например, загрузки данных на сервер.

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

демо

Добавление полосы загрузки на страницу

Чтобы добавить полосу загрузки на страницу, необходимо использовать элемент progress. Значения полосы загрузки определяются с помощью атрибутов value и max. Вот пример:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Как уже было сказано, элемент progress является обычной полосой загрузки в HTML5 и, проще говоря, отображает прогресс выполнения какой-либо задачи. При этом атрибут max определяет максимальное значение, требуемое для выполнения задачи, а атрибут value определяет, сколько уже выполнено на текущий момент.

Браузерная поддержка: Chrome 8+, Firefox 16+, IE 10+, Opera 11+, Safari 6+.

Стилизация полосы загрузки

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

Как сделать фон в полоску

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

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

Как сделать фон в полоску

Решение

Предположим, что у нас есть простейший вертикальный линейный градиент, от #fb3 до #58a:

background: linear-gradient(#fb3, #58a);

линейный градиент

Теперь попробуем немного приблизить друг к другу границы перехода цвета

background: linear-gradient(#fb3 20%, #58a 80%);

Теперь верхние 20% нашего контейнера заполнены сплошным цветом #fb3 , а нижние 20% — сплошным цветом #58a . Настоящий градиент занимает только 60% высоты контейнера. Если мы еще сильнее сдвинем границы перехода цвета (40% и 60% соответственно, то высота градиента станет еще меньше. Возникает вопрос: а что произойдет, если границы перехода цвета встретятся на одном уровне?

background: linear-gradient(#fb3 50%, #58a 50%);

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

Как вы видите никакого градиента больше нет, только два участка сплошного цвета, каждый из которых занимает по половине нашего back ground-image . По сути, мы создали две большие горизонтальные полосы. Так как градиенты — это всего лишь сгенерированные фоновые изображения, то с ними можно обходиться так же, как с любыми другими фоновыми изображениями, например, корректировать их размер с помощью background-size.

background: linear-gradient(#fb3 50%, #58a 50%);
background-size: 100% 30px;

Мы уменьшили высоту наших двух полосок до 15px каждая. Так как наш фон повторяется, теперь весь контейнер заполнен горизонтальными полосами.


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

background: linear-gradient(#fb3 30%, #58a 30%);
background-size: 100% 30px;

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

Это означает, что если для второго цвета мы зададим позицию на уровне 0 , то браузер скорректирует ее, увеличив до позиции предыдущей границы перехода цвета, — как раз то, что нам требуется. Следовательно, следующий фрагмент кода создает точно такой же градиент, который мы уже видели, и при этом лучше соответствует принципам DRY:

background: linear-gradient(#fb3 30%, #58a 0);
background-size: 100% 30px;

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

background: linear-gradient(#fb3 33.3%, #58a 0, #58a 66.6%, yellowgreen 0);
background-size: 100% 45px;

Вертикальные полосы

Горизонтальные полосы реализовать проще всего, но на веб-сайтах, которые нам попадаются в Сети, встречаются фоны не только с горизонтальными полосами. Не менее распространены вертикальные полосы, а самые популярные и визуально интересные — это, вероятно, разные варианты диагональных полос. К счастью, градиенты CSS помогают справиться и с этими задачами, предлагая решения разной степени сложности.

Код, создающий вертикальные полосы, очень похож на предыдущий. Главное отличие — дополнительный первый аргумент, указывающий направление градиента. Мы могли бы указать его и при определении горизонтальных полос, но тогда нам было бы достаточно значения по умолчанию ( to bottom ). Помимо этого, в данном случае нам, очевидно, необходимо указать другие значения background-size :

background: linear-gradient(to right, /* или 90deg */ #fb3 50%, #58a 0);
background-size: 30px 100%;

Наши вертикальные полосы. Вверху: заполнение вертикальными полосами без повторения. Внизу: повторяющиеся полосы

Диагональные полосы

После горизонтальных и вертикальных полос кажется логичным попытаться создать диагональные полосы (с углом наклона 45°), еще раз изменив значение background-size и направление градиента, например, так:

background: linear-gradient(45deg, #fb3 50%, #58a 0);
background-size: 30px 30px;

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


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

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 30px 30px;

Наши полосы под углом 45°; пунктирными линиями обозначена повторяющаяся плитка рисунка

Как вы видите, нам удалось создать диагональные полосы, но они кажутся тоньше, чем горизонтальные и вертикальные из предыдущих примеров. Для того чтобы понять, почему так произошло, нам необходимо снова вспомнить теорему Пифагора из школьного курса, которая позволяет вычислять длины сторон прямоугольных треугольников. Согласно теореме, длина гипотенузы (самой длинной, диагональной стороны треугольника) равна

где a и b — длины катетов. Для равностороннего прямоугольного треугольника с углами 45° формула принимает вид
В случае с нашими диагональными полосами размер фона определяет длину гипотенузы, но ширина полосы в действительности равна длине катета. Схема, объясняющая эти расчеты, показана на рисунке.

Это означает, что для того, чтобы получить полосы шириной 15px , как в предыдущих примерах, в качестве размера фона необходимо указать значение
пиксела:

background: linear-gradient(45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;

Но если только на вас не наставили дуло пистолета и не заставляют под страхом смерти создавать диагональные полосы шириной ровно 15 пикселов (кстати,гибель все равно неизбежна, потому что 2 — нерациональное число, так что даже указанное нами значение приблизительное, хотя и с высокой степенью точности), я настоятельно рекомендую округлять это тяжеловесное число до чего-нибудь вроде 42.4px или даже 42px .

Готовые полосы под наклоном 45°; обратите внимание, что ширина полос такая же, как в предыдущих примерах

Еще лучшие диагональные полосы

Метод, продемонстрированный в предыдущем разделе, не обеспечивает особой гибкости. А что, если мы захотим создать полосы под углом 60°, а не 45°? Или 30°? Или 3,1415926535°? Если мы попытаемся изменить угол градиента, результат будет просто ужасным.

К счастью, существует гораздо лучший способ рисования диагональных полос. Этот факт не слишком известен, но linear-gradient() и radial-gradient() также предлагают версии с повторением: repeating-linear-gradient() и repeating-radial-gradient(). Они работают совершенно так же, с одним только отличием: границы перехода цвета повторяются бесконечно, пока не заполнят все изображение. Так, например, следующий повторяющийся градиент:


background: repeating-linear-gradient(45deg, #fb3, #58a 30px);
эквивалентен этому простому линейному градиенту:
background: linear-gradient(45deg, #fb3, #58a 30px, #fb3 30px, #58a 60px, #fb3 60px, #58a 90px, #fb3 90px, #58a 120px, #fb3 120px, #58a 150px, …);
Повторяющиеся линейные градиенты идеальны для — вы уже догадались — полос! Благодаря их повторяющейся природе мы можем создавать цельные фоны из сгенерированных градиентных изображений. Это означает, что нам больше не нужно беспокоиться о рисовании бесшовно стыкующихся плиток, которые затем нужно уложить для формирования фона элемента. Для сравнения: фоновое изображение на рис. 2.33 можно было бы создать с помощью такого повторяющегося градиента:

background: repeating-linear-gradient(45deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

Первое очевидное преимущество — уменьшение количества повторений: для того чтобы изменить любой из цветов, нам нужно внести только две правки вместо трех. Также обратите внимание, что теперь размеры определяются в терминах границ перехода цвета градиента, а не background-size . Размер фона используется первоначальный; для градиента это размер элемента. Это означает, что длины также становятся более понятными, так как измеряются они по градиентной линии, которая перпендикулярна нашим полосам.
Однако самое больше преимущество состоит в том, что теперь мы можем задать абсолютно любой угол, и градиент будет работать — не нужно больше размышлять над проработкой плиток с бесшовным соединением. Например, вот как определяются полосы под углом 60°:
background: repeating-linear-gradient(60deg, #fb3, #fb3 15px, #58a 0, #58a 30px);

Настоящие полосы под углом 60°.

Потребовалось всего лишь изменить угол! Обратите внимание, что с этим методом нам требуются четыре границы перехода цвета для двух цветных полос, независимо от угла наклона полос. Это означает, что для создания горизонтальных и вертикальных полос лучше все же использовать первый метод, а к этому прибегать для определения диагональных полос. Если же мы имеем дело с полосами под углом 45°, то эти два метода можно даже объединить, по сути, воспользовавшись повторяющимися линейными градиентами для упрощения кода, который создает нашу повторяющуюся плитку:

background: repeating-linear-gradient(45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);
background-size: 42.426406871px 42.426406871px;

Гибкие нежные полосы

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

background: repeating-linear-gradient(30deg, #79b, #79b 15px, #58a 0, #58a 30px);

Как видно, мы создали чередующиеся полосы цвета #58a и одного из более светлых его вариантов. Однако взаимоотношение между этими цветами не очевидно, если просто прочитать код. Более того, если бы нам потребовалось
изменить базовый цвет, то это повлекло бы за собой четыре (!) правки.

БУДУЩЕЕ. ГРАНИЦЫ ПЕРЕХОДА ЦВЕТА С ДВУМЯ ПОЗИЦИЯМИ
Скоро у нас появится возможность указывать две позиции для одной и той же границы перехода цвета и это одно из базовых запланированных дополнений в CSS Image Values Level 4 Это задумано как сокращение, позволяющее задать две последовательные границы перехода цвета с одним и тем же цветом, но разными позициями и очень востребованная функциональность при создании градиентных узоров. Например, код для диагональных полос выглядел бы так:

background: repeating-linear-gradient(60deg, #fb3 0 15px, #58a 0 30px);

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

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),
hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

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

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

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

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