Кнопки с эффектом загрузки на CSS3

Опубликовал: 5 лет назад CSS, Уроки

Приветствую вас дорогие друзья.

Блог Виктора Доценко постоянно ищет/пишет для вас какие-то интересные новости и статьи. Сегодня я порадую вас интересным уроком: «Кнопки с эффектом загрузки на CSS3». Данные кнопки станут прекрасным дополнением к вашим проектам и веб приложениям.

Готовы познакомится с данным уроком? Тогда переходим в полную версию статьи.

Progress Button

В уроке «Кнопки с эффектом загрузки на CSS3» мы научимся создавать при помощи CSS3 – кнопки, которые сами служат индикатором загрузки прогресса. В уроке так же показано создание 3D кнопок в которых отображение происходит на одной стороне кнопки при вращении в перспективе.

Демо Скачать

Многие из вас, возможно уже знакомы с «Ladda» от Эмиля Хаттаба, которая представляет собой концепцию пользовательского интерфейса в котором прогресс отображается непосредственно на кнопку. Область применения весьма обширна. К примеру, вы можете повесить действие «Сохранить» на кнопку в использованной вами форме и тем самым вы дадите понять пользователю, что действие произведено успешно.

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

Обратите внимание на то, что мы будем использовать переходы на псевдо-элементы и они до сих пор плохо работают или вовсе неподерживаются на некоторых браузерах (к примеру, Safari и Mobile Safari).

Так же важно понимать, что мы должны перевести transform-style: preserve-3d в формат 3D стилей для IE 10 и IE 11.

Возьмем простую разметку кнопки:

И превратим ее в следующий вид:

Если мы хотим сделать кнопку без перспективы при помощи атрибута data-perspective  мы должны выводить кнопку таким способом:

Следующим шагом создаем CSS файл и прописываем стили для вертикального и горизонтального заполнения для индикатора загрузки.

Данные стили являются общими для всех кнопок (важно понимать, что перспективные стили нужны только для кнопок с 3D трансформированием.

CSS выглядит следующим образом:

Мы будем использовать псевдо-элементы ::before и ::after с иконками для успешных или ошибочных результатов загрузки.

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

Пример отдельного стиля кнопки — следующий:

Кнопка будет одно из трех статусов (или ни одного): статус-загружается, статус-успешно и статус-ошибка.

Для браузеров, которые не поддерживают необходимые атрибуты и свойства, мы предоставили запасной вариант – по умолчанию (заполнение по горизонтали).

Иконки были созданы IcoMoon в приложении IcoMoonapp.

Демо Скачать

Source: codrops


Новая система комментариев
comments powered by HyperComments