Делаем индикатор прогресса с использованием только CSS
В данном уроке мы сделаем индикатор прогресса с использованием только CSS3, никаких изображений. Несмотря на это, дизайн индикатора будет вполне приличный.
Впечатление немного портит Opera 11, которая поддерживает CSS3, но не полностью.
Браузеры, которые совсем не поддерживают CSS3, будут выводить индикатор прогресса, но вид его будет совсем уж простым.
HTML
Полоска будет представлена элементом <div>
с классом meter
. Внутри <div>
будет иметься элемент <span>
, который будет работать как заполненная часть индикатора прогресса. Процент заполнения будет устанавливаться встроенным указанием стиля, так как именно разметка HTML содержит информацию о проценте заполнения индикатора. Альтернатива CSS в виде отдельного файла будет выглядеть как "fill-10-percent", "fill-one-third" или что-то подобное, что является более тяжеловесным решением, обладающим меньшей гибкостью при использовании.
Основа:
<div class="meter"> <span style="width: 25%"></span> </div>
Начало CSS
Контейнер <div>
является "корпусом" индикатора. Мы не будем устанавливать ширину, поэтому он будет растягиваться на всю ширину родительского элемента, что соответствует поведению блочного элемента по умолчанию. Вы можете сделать так, как нужно вам. Высота также устанавливается произвольно. В нашем примере установлено значение 20 px для высоты, но она может быть любой. Также используются закругленные углы и тени для улучшения внешнего вида индикатора.
.meter { height: 20px; /* Может быть любой */ position: relative; background: #555; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; padding: 10px; -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3); -moz-box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); box-shadow : inset 0 -1px 1px rgba(255,255,255,0.3); }
А внутренний элемент <span>
будет являться полоской заполнения индикатора прогресса. Мы будем выводить его как блочный элемент со значением высоты 100%, так что он будет растягиваться на все доступное пространство. Также используется набор правил CSS3 для задания градиента и скругления углов.
.meter > span { display: block; height: 100%; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: rgb(43,194,83); background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) ); background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% ); -webkit-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 2px 9px rgba(255,255,255,0.3), inset 0 -2px 6px rgba(0,0,0,0.4); position: relative; overflow: hidden; }
Другие цвета
Сделаем так, чтобы менять цвета было просто. Добавим класс "orange" или "red" к контейнеру и изменим его цвет.
.orange > span { background-color: #f1a165; background-image: -moz-linear-gradient(top, #f1a165, #f36d0a); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f1a165),color-stop(1, #f36d0a)); background-image: -webkit-linear-gradient(#f1a165, #f36d0a); } .red > span { background-color: #f0a3a3; background-image: -moz-linear-gradient(top, #f0a3a3, #f42323); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #f0a3a3),color-stop(1, #f42323)); background-image: -webkit-linear-gradient(#f0a3a3, #f42323); }
Диагональные полоски
Мы можем получить прелестный эффект с помощью добавления элемента поверх нашего элемента <span>
. В добавленном элементе будет использоваться повторяющийся градиент CSS3. Семантически для достижения результата лучше всего использовать псевдо элемент. Мы будем использовать абсолютное позиционирование над областью элемента <span>
(который позиционируется относительно) и зададим для него скругленные углы.
.meter > span:after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent) ); background-image: -moz-linear-gradient( -45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent ); z-index: 1; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; -webkit-animation: move 2s linear infinite; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; }
Анимируем диагональные полоски
Только Firefox 4 может анимировать псевдо элементы, а только браузеры WebKit могут выполнять анимации с ключевым кадром. Поэтому, к сожалению, придется добавить дополнительный элемент <span>,
который будет анимироваться в браузерах WebKit.
<div class="meter animate"> <span style="width: 50%"><span></span></span> </div>
Элемент <span>
будет такой же, как и псевдо элемент. Поэтому мы можем использовать те же значения...
.meter > span:after, .animate > span > span {
... только исключим дублирование:
.animate > span:after { display: none; }
Мы будем перемещать фон и изменять его размер:
@-webkit-keyframes move { 0% { background-position: 0 0; } 100% { background-position: 50px 50px; } }
И вызываем анимацию:
.meter > span:after, .animate > span > span { -webkit-animation: move 2s linear infinite; }
Анимируем заполнение индикатора
К сожалению, мы не сможем анимировать естественным образом процесс изменения ширину от 0 до установленного во встроенном стиле значения.
@-webkit-animation expandWidth { 0% { width: 0; } 100% { width: auto; } }
Такой формат еще не поддерживается нигде. Поэтому придется использовать jQuery. Измеряем оригинальную ширину, изменяем ее на 0, а затем анимируем процесс восстановления до оригинального значения:
$(".meter > span").each(function() { $(this) .data("origWidth", $(this).width()) .width(0) .animate({ width: $(this).data("origWidth") }, 1200); });
А как же HTML5?
HTML5 имеет специальную опцию для таких задач: <progress>
и <meter>
! Да, но есть некоторые шероховатости. Данные элементы имеют весьма специфический вид. По умолчанию они выглядят как индикатор прогресса на Mac:
Вы может отключить стиль по умолчанию:
progress { -webkit-appearance: none; }
Так можно удалить глянец, который присутствует по умолчанию. Но вы все еще будете весьма ограниченны в возможностях по изменению элемента. Можно слегка поменять внешний вид следующими командами:
progress::-webkit-progress-bar-value { -webkit-appearance: none; background: orangered; }
...на этом возможности по изменению внешнего вида элемента заканчиваются. Кроме того, внешний вид будет очень сильно различаться в разных браузерах, даже в семействе WebKit. псевдо элементы также несовместимы с таким решением.
Так что на текущий момент решение с парой div/span является очень хорошим вариантом.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/nP5obehtMb4/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Чтобы вырастить плодоносящий сайт - его полезно регулярно поливать и удобрять с помощью рекламы и оптимизации Компания "RedLine" |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.