Пять крутых прелоадеров при помощи CSS3

Каковы преимущества и недостатки прелоадеров на чистом CSS? Почему бы воспользоваться решениями на Javascript, или даже старым добрым способом: анимированными GIF? Так вот, однозначного ответа на этот вопрос нет, все будет зависеть от ситуации. Но позвольте мне дать вам некоторые идеи.

• CSS-анимация легко редактируема: вы можете быстро менять длительность, скорость, цвет, что угодно!
• Вы можете применять масштабирование без потери качества
• Анимация с помощью CSS быстрее, чем анимация с помощью Javascript, так как использует родной движок браузера
• CSS анимации используют GPU ускорение: если у вас хороший графический процессор на видеокарте, вы будете иметь очень быстрые и плавные анимации
• CSS анимацию можно легко остановить с помощью свойства propertyanimation-play-state

• CSS анимации поддерживается не всеми браузерами: IE9 и Opera Mini не понимают эти инструкции
• Прелоадеры \ индикаторы загрузки могут состоять из громоздкого кода, который не всегда того стоит
• Анимации CSS не могут быть так просто привязаны к pointer-events (кроме наведения мышкой) с помощью JavaScript

Определить поддерживает ли данный браузер анимацию с помощью CSS можно с помощью библиотеки Modernizr и если нет, использовать изображение в формать GIF.

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

Наш HTML код прост как никогда

Какой-то минимализм прямо! We could even do this we a single element but it can easily make the CSS ugly. Note that we could have both, clean markup and nice CSS when we’ll be able to animate pseudo-elements. ;)

Мы создаем контейнер для сферы: им будет служить тег с классом bar . Чтобы сохранить пропорции и сделать прелоадер масштабируемым, я использовал единицы измерения em . Вы можете легко изменить значение размера шрифта в контейнере, масштабирую его так, как вам хочется. Вы еще не зеваете?))

Давайте добавим надпись "Подождите. " . Вы, наверное, заметили, ее нет в нашем HTML коде, хотя это контент. На самом деле, если все делать по правилам, она действительно должна быть в HTML разметке, так как это содержание, а не графика. Но для примера, я решил, что не стоит заморачиваться:

Теперь займемся нашей сферой.

Ключевые кадры для нашей анимации:

How could it be easier, right? So the sphere element runs the move animation in 1.75 seconds alternatively from start to end and end to start.

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

Теперь давайте продолжим с чем-то более сложным и приятным.

Этот эффект полностью построен на основе псевдоэлемента. Дополнительный код здесь не нужен:

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

А теперь псевдоэлемент для внутреннего прозрачного белого круга:

И наша анимация

Теперь давайте сделаем что-нибудь более сложное. В плане эксперимента, я пытался имитировать случайное поведение в CSS. Увы и ах: это невозможно. Даже если вы установите абсолютно произвольные значения, никакой хаотичности не будет. Во всяком случае, мы увидим это с вами чуть позже.

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

Первое, что нужно сделать - это стилизовать сам список.

. и общие свойства для всех элементов списка.

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

Последнее, что останется сделать - это написать сценарий для двух анимаций. Первая описывает вращение, а вторая - изменение прозрачности.

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

А что не так с цифрами, - спросите вы? Как я уже говорил вам, что я пытался сделать движение непредсказуемым. Я мог бы сделать это с помощью скрипта на Javascript - сгенерить случайные чисела и вставить их в CSS, но мне эта идея не понравилась. Я сделал по другому. Я сам придумал эти "случайные" числа, вот почему вы можете увидеть в CSS коде такие странные анимационные длительности: 1.72s , 4.29s или 1.13s . То же самое и с ключевыми кадрами для величин непрозрачностей для opa . Вот такой вот "псевдо рандом"))

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

Главная проблема, с которой я столкнулся в отношении свойства transform-origin – это недопонимание самого процесса. Я так и не понял до конца (и до сих пор не всегда понимаю), как это происходит.

В любом случае, суть заключается в том, чтобы отобразить transform origin с помощью псевдоэлемента. Взгляните:

Давайте продолжим наши изыски и создадим нечто в стиле спим панк: колеса, шестерни и т.д. Думаю, вам понравится. Начнем.

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

У нас есть много свойств, которые мы должны применить к контейнеру: размер, позиционирование, настройки для шрифта, анимация и т.д./p>

Вау, мы сделали это! Это было непросто, не так ли? Теперь нам нужно сделать внутренние колеса из псевдо-элементов.

Теперь внутренний контейнер inner и стили для тегов span . Обратите внимание, как мы используем параметр reverse для контейнера inner , чтобы отменить вращение контейнера wrapper .

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

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

1. Немного изменить свою прозрачность
2. Стать снова непрозрачной
3. Подождать, пока все остальные буквы не сделают то же самое
4. Вернуться к 1 шагу и повторить все по новой

Как мы это делаем? Смотрите:

1. Подсчитайте число букв в вашем слове. В моем примере их 8.
2. Вы делите 100 (число ключевых кадров, выраженное в %) на это число. Получается 12,5%.
3. Каждые 14.28 кадра запускается анимация буквы.
4. Готово.

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

На самом деле, наш элемент - это одна из наших маленьких сфер. Семь других сделаны из бокс-тени.

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

А теперь анимация. A few explanations about the second one ( blink ):

• У нас есть 8 кружочков, поэтому мы разделим 100 ключевых кадров на 8 и получим 12.5
• Каждые 12,5 ключевых кадров, кружок изменяет свою непрозрачность. RGB (18,52,86) это код для #123456, записанный в RGB формате.
• В первом кадре (12,5%), это сам элемент, который снижает прозрачность.

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

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

Lettering.js does a very simple thing: it wraps every letter in the targeted element with span tags.

Таким образом, с этого момента, мы не должны вручную обертывать наши символы тегами span , Lettering.js делает это за нас. Довольно просто, не так ли? Но нас куда больше волнует CSS, не так ли?

Как вы уже наверняка поняли, нам нужен цикл loop. И у меня есть хорошие новости, CSS препроцессоры поддерживают это! По крайней мере, некоторые из них. В частности, Sass поддерживает цикл loop, а вот LESS уже не обеспечивает поддержку цикла. Вместо этого, вы должны сделать рекурсивную функцию и передавать в нее уменьшающееся значение. Жесть конечно, но работает.

Видите? Рекурсивная функция может заменить нам цикл. Итак, для нашего 4 примера:

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