Новейшие дополнения к спецификациям HTML и CSS позволяют веб-разработчикам создавать красивые и удобные компоненты. Среди этих компонентов индикаторы выполнения / загрузки (ProgressBar). Использование этих компонентов улучшит внешний вид сайта.
В этом туториале, посвященном интерфейсу, я покажу вам как делать progressbar на css и hrml.
Приготовления
Давайте начнем с организации файлов для проекта. Нам понадобится 3 файла:
- progress.html, который будет содержать нашу разметку.
- ui.css, который будет содержать наши стили CSS.
- progress.js, который будет содержать некоторые дополнительные анимации jQuery.
Первый шаг — создать новый каталог на вашем веб-сервере или жестком диске и создать 3 файла, которые вместе станут основой нашей панели HTML / CSS.
HTML-разметка
Итак. Откройте файл progress.html и вставьте в него следующую разметку HTML:
Позвольте мне немного пояснить код: в первой строке я объявил HTML5-тип документа. Затем строки 12-16 содержат разметку для самого progressbar. Если вы сохраните файл и просмотрите его в своем браузере прямо сейчас, вы увидите, что ничего не появляется. Не волнуйтесь, мы собираемся применить магию чистого CSS через минуту.
Погружение в CSS
Как только вы закончите работу с HTML-частью, откройте файл ui.css и вставьте в него следующий код CSS.
Там нет ничего необычного, только некоторые основные стили (которые я упростил из исходного источника) для макета.
Наконец, можем заняться более серьезными вещами. Приведенный ниже код оживит ваш progressbar HTML / CSS. Я объясню, как это работает через минуту. А пока скопируйте его и вставьте в свой файл ui.css.
Сохраните файл ui.css и посмотрите на файл progress.html в своем веб-браузере. Если вы тщательно следовали предыдущим шагам этого урока, вы должны увидеть великолепный progressbar, выполненный без использования какого-либо изображения.
Итак, как этот код работает во всех браузерах? Вот объяснение:
Во-первых, у нас есть два класса CSS: .ui-progress-bar и .ui-progress. Первый — это контейнер, а второй — сам элемент прогресса.
- Строки с 1 по 9: Эти строки определяют анимацию, специфичную для веб-набора, которая позволяет нам перемещать элемент из одной точки в другую. Для получения дополнительной информации об анимации HTML и CSS см. http://webkit.org/blog/324/css-animation-2/.
- Строка 16: CSS3-свойство border-radius позволяет вам определять радиус и получать закругленные углы.
- Строка 17: специфическое свойство Mozilla для border-radius.
- Строка 18: специфическое свойство Webkit для border-radius.
- Строка 19: свойство -webkit-gradient позволяет добавлять градиент к элементу. Работает только на Webkit, другие браузеры игнорируют это свойство.
- Строка 20: специфичное для Mozilla свойство, аналогичное -webkit- gradient с другим синтаксисом.
- Строки с 21 по 23: box-shadow (и его специфичные для браузера альтернативы) позволяет добавлять тень к элементу.
- Строка 34: специфическое свойство Webkit, основанное на стандартном свойстве background-size, которое позволяет указать размер фонового изображения.
- Строка 56: запускает анимацию веб-набора, определенную в строке 1.
Последние штрихи: использование jQuery для анимации индикаторов прогресса
Чистые CSS-индикаторы — это очень крутая вещь, но так как индикаторы выполнения предназначены для отображения прогресса для пользователей, нам теперь нужно его анимировать. Для этого мы будем использовать трио HTML CSS JavaScript. Точнее, мы будем использовать jQuery.
Откройте файл progress.html и вставьте две строки ниже чуть выше закрывающего тега .
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="progress.js" type="text/javascript" charset="utf-8"></script>
Этот код загрузит jQuery из Google, а также ваш файл progress.js, который будет содержать необходимый код для анимации progressbar. Конечно, вы можете использовать собственную версию jQuery вместо хост-версии Google, если хотите.
Теперь вставьте приведенный ниже код в ваш файл progress.js:
После сохранения файла просмотрите файл progress.html через веб-браузер: как видите, индикатор выполнения теперь анимирован благодаря jQuery, а также HTML и CSS.
Этот код JavaScript переводит индикатор выполнения с 0 на 100. После достижения 100 отображается пользовательское сообщение. В этом уроке отображается индикатор Hello World. Это сообщение можно изменить, отредактировав файл progress.html.
Поздравляем с завершением этого урока! Теперь вы знаете, как создавать progressbar HTML / CSS.
Исходный код всего проекта размещен на GitHub
Оригинал этой статьи, как и другие интересные материалы вы можете посмотреть на моем блоге.