Прогресс бар css: Прогресс бар на чистом CSS3

Bootstrap Бутстрап Строки хода выполнения Базовый индикатор

HTML5CSS.ru

ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ

❮ Назад Дальше ❯

---

Базовый индикатор выполнения

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

Bootstrap предоставляет несколько типов индикаторов выполнения.

Индикатор выполнения по умолчанию в Bootstrap выглядит следующим:

70% Complete

Чтобы создать индикатор выполнения по умолчанию, добавьте .progress класс к <div> элементу:

Пример

<div>
  <div role=»progressbar» aria-valuenow=»70″
  aria-valuemin=»0″ aria-valuemax=»100″>
    <span>70% Complete</span>
  </div>
</div>

Примечание: Индикаторы выполнения не поддерживаются в Internet Explorer 9 и более ранних версиях (поскольку они используют переходы и анимацию CSS3 для достижения некоторых эффектов).

Примечание: Чтобы улучшить доступность для людей, использующих средства чтения с экрана, необходимо включить атрибуты ARIA-*.

---

Индикатор выполнения с меткой

Индикатор выполнения с меткой выглядит следующим:

Удалите .sr-only класс из индикатора выполнения, чтобы отобразить видимый процент:

Пример

<div>
  <div role=»progressbar» aria-valuenow=»70″
  aria-valuemin=»0″ aria-valuemax=»100″>
    70%
  </div>
</div>

---

---

Цветные полосы прогресса

Контекстные классы используются для обеспечения «смысла через цвета».

Контекстные классы, которые могут использоваться с индикаторами выполнения:

• .progress-bar-success
• .progress-bar-info
• .progress-bar-warning
• .progress-bar-danger

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

В следующем примере демонстрируется создание индикаторов выполнения с различными контекстными классами:

Пример

<div>
  <div role=»progressbar» aria-valuenow=»40″
  aria-valuemin=»0″ aria-valuemax=»100″>
    40% Complete (success)
  </div>
</div>

<div>
  <div role=»progressbar» aria-valuenow=»50″
  aria-valuemin=»0″ aria-valuemax=»100″>
    50% Complete (info)

  </div>
</div>

<div>
  <div role=»progressbar» aria-valuenow=»60″
  aria-valuemin=»0″ aria-valuemax=»100″>
    60% Complete (warning)
  </div>
</div>

<div>
  <div role=»progressbar» aria-valuenow=»70″
  aria-valuemin=»0″ aria-valuemax=»100″>
    70% Complete (danger)
  </div>
</div>

---

Чередующиеся полосы прогресса

Полосы прогресса также могут быть полосатыми:

40% Complete (success)

50% Complete (info)

60% Complete (warning)

70% Complete (danger)

Добавьте класс, . progress-bar-striped

чтобы добавить полосы к индикаторам выполнения:

Пример

<div>
  <div role=»progressbar»
  aria-valuenow=»40″ aria-valuemin=»0″ aria-valuemax=»100″>
    40% Complete (success)
  </div>
</div>

<div>
  <div role=»progressbar»
  aria-valuenow=»50″ aria-valuemin=»0″ aria-valuemax=»100″>
    50% Complete (info)
  </div>
</div>

<div>
  <div role=»progressbar»
  aria-valuenow=»60″ aria-valuemin=»0″ aria-valuemax=»100″>
    60% Complete (warning)
  </div>
</div>

<div>
  <div role=»progressbar»
  aria-valuenow=»70″ aria-valuemin=»0″ aria-valuemax=»100″>

    70% Complete (danger)
  </div>
</div>

---

Анимированный индикатор выполнения

Добавьте класс .active для анимации индикатора выполнения:

Пример

<div>
  <div role=»progressbar»
  aria-valuenow=»40″ aria-valuemin=»0″ aria-valuemax=»100″>
    40%
  </div>
</div>

---

Гистограммы выполнения с накоплением

Также можно штабелировать строки прогресса:

Free Space

Warning

Danger

Создайте стековый индикатор выполнения, поместив несколько стержней в одно и то же <div>:

Пример

<div>
  <div role=»progressbar»>

    Free Space
  </div>
  <div role=»progressbar»>
    Warning
  </div>
  <div role=»progressbar»>
    Danger
  </div>
</div>

---

❮ Назад Дальше ❯

PHP\CSS\JS\HMTL Editor

---

---

Copyright 2018-2020 HTML5CSS. ru

Правила и Условия Политика конфиденциальности О нас Контакты

35 красивых дизайнов Progress Bar

Примечание редактора: Для более новой, обновленной версии этого поста, проверьте это здесь.

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

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

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Читайте также: 38 шаблонов кнопок «Призыв к действию»

Adobe Inspired Bar

Пухлая загрузка бар

Красочные Прогресс Бары

Темная полоса загрузки

Погрузчики Dark Progress

Круговой Погрузчик Прогресса

Панель загрузки GUi

HUD Progress Bar

Минималистский бар загрузки

Современный Прогресс Бар

Pretty Progress Bar

Процент Прогресс-бар

Простой Бар

Time Progress Bar

Progress Pop-Up

Радиальный дисплей прогресса

Тонкие прочные погрузочные брусья

Футуристический Progress Bar

Тонкий прогресс бар

Индикатор

Цветные индикаторы прогресса

Круговые прогресс-бары

Чистый и простой бар загрузки

Безобразный цвета

Красный на зеленый бар загрузки

Модальные Прогресс Бары

Прогресс бары с процентами

Pink Progress Bars

Каменные погрузочные брусья

Clever Progress Bar

Минимальная зеленая полоса

Зефир Погрузчик Бары

Пожалуйста, подождите

Изменяющий цвет индикатор выполнения

Slick Percentage Bar

Вывод

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

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

Примечание редактора: этот пост написан Кристофером Джексоном для Hongkiat.com. Кристофер является независимым редактором в DesignCrowd, где он пишет о дизайне логотипов, графическом дизайне и тенденциях веб-дизайна.

Программы для Windows, мобильные приложения, игры — ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале — Подписывайтесь:)

Tailwind CSS Progress Bar — бесплатные примеры и руководство

Индикатор

Используйте адаптивный компонент прогресса с вспомогательными примерами для пользовательского интерфейса прогресса, индикатора выполнения, шагов индикатора выполнения, цветов и многого другого. Бесплатная загрузка, лицензия с открытым исходным кодом.

---

Базовый пример

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

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

            
      <дел>
        <дел>
      

            
      <дел>
        <дел>