На веб -страницах часто наблюдаются эффекты стержня, такие как пополам по распределению системы, статус загрузки и т. Д. Компонент стержней прогресса использует атрибуты перехода и анимации CSS3 для завершения некоторых спецэффектов. Эти спецэффекты не поддерживаются в IE9 и ниже версий IE9 и Firefox, а Opera 12 не поддерживает анимационные атрибуты.
Бар прогресса похожа на другие независимые компоненты, разработчики могут выбрать соответствующую версию в соответствии с их потребностями:
Меньше: Progress-Bars.less
Sass: _progress-bars.scss
Основной планшний прогресс
Принцип реализации:
Требуются два контейнера. Внешний контейнер использует имя класса. Прогресс, а субконфиндер использует имя класса. Progress-bar; где .progress используется для установки фонового цвета контейнера для стержня прогресса, высоты, расстояния и т. Д.; и .progress-bar устанавливает направление прогресса, цвет фона и чрезмерный эффект панели прогресса; Ниже приведен исходный код CSS:
Прогресс {Высота: 20px; Margin-Bottom: 20px; переполнение: скрыто; фоновый цвет: #f5f5f5; граница-радиус: 4px; -webkit-box-shadow: inset 0 1px 2px rgba (0, 0, 0, .1); Box-shadow: Inset 0 1px 2px rgba (0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,. {float: слева; .15);-Webkit-Transition: ширина.пример:
<div> <div rol = "progressbar" aria-valuenow = "30" aria-valuemin = "0" aria-valuemax = "100"> <pan> 30%</span> </div> </div>
Функция атрибута роли: говорит поисковым системам, что функция этого DIV является панелью хода;
Aria-Valuenow = ”30” Функция атрибута: текущий прогресс в плане прогресса составляет 40%;
Aria-Valuemin = ”0” Функция атрибута: минимальное значение проработаной панели составляет 0%;
ARIA-ValueMax = ”100” Функция атрибута: максимальное значение проработаной панели составляет 100%;
Вы можете удалить тег <pan> с набором класса только .SR из компонента панели прогресса, чтобы позволить отображать текущий прогресс;
<viv> <div rol = "progressbar" aria-valuenow = "40" aria-valuemin = "0" aria-valuemax = "100"> 40%</div> </div>
Красочный планшний прогресс
Цветная панель прогресса такая же, как в панели прогресса в предупреждении. Чтобы дать пользователям лучший опыт, различные цвета стержней прогресса также настроены в соответствии с различными состояниями, в основном включая следующие четыре типа:
Progress-bar-info: представляет собой планку прогресса информации, синий
Progress-Bar-Success: указывает на успех бара прогресса, зеленый
Прогресс-фарнинг: указывает на план прогресса предупреждения, желтый
Прогресс-бар-опасность: указывает на панель выполнения ошибок, красный
исходный код CSS:
.progress-bar-success {founal-color: #5cb85c;}. Progress-bar-info {background-color: #5bc0de;}. Прогресс-Bar-warning {фоновый цвет: #f0ad4e;}. Прогресс-bar-danger {фоновый цвет: #d9534f;}Как использовать:
Просто добавьте соответствующее имя класса в базовую панель прогресса
пример:
<h1> Красочный панель прогресса </h1> <div> <div rol = "progressbar" aria-valuenow = "25" ария-валуэмин = "0" aria-valuemax = "100"> 25%</div> </div> <div> <div olue = "progressbar" aria-valuemax = "40" aria-valuemax = "100" 100 "100" 100 "100" 100 " aria-valuemax = "0"> 40%</div> </div> <div> <div rol = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <div> <div olue = "progressbar" aria-valuenow = "40" aria-val aria-val aria-valax = "aria-valax =" aria-valax = "aria-valax =" aria-valax = "aria-valax =" 100 ". aria-valuemin = "0"> 60%</div> </div>
Эффекты следующие:
Полосатый план прогресса
Полосатый панель прогресса использует линейный градиент CSS3. Он не использует никаких изображений. Использование полосовой панели прогресса требует только добавления имени класса «Progressed» в контейнер панели прогресса. Прогресс Если вы хотите сделать полосу прогресса, такую как цветовой прогресс, и иметь цветовой эффект, вам нужно только добавить соответствующее название класса цвета в панель прогресса.
Ниже приведено исходный код.
.progress-striped .progress-bar {facky-image: -webkit-linear-gradient (45deg, Rgba (255, 255, 255, .15) 25%, прозрачный 25%, прозрачный 50%, RGBA (255, 255, 255,. Прозрачный 75%, прозрачный); фоновое изображение: линейно-градиент (45DEG, RGBA (255, 255, 255, .15) 25%, прозрачный 25%, прозрачный 25%, прозрачный 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255,. прозрачный); размер фонового размера: 40px 40px;}Каждое состояние, соответствующее прогрессу полосы, также имеет свой цвет
.progress-striped .progress-bar-success {фоновый image: -webkit-linear-градиент (45deg, Rgba (255, 255, 255, .15) 25%, прозрачный 25%, прозрачный 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255,. 75%, прозрачный 75%, прозрачный); изображение фонового происхождения: линейно-градиент (45DEG, RGBA (255, 255, 255, .15) 25%, прозрачный 25%, прозрачный 25%,. 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, прозрачный 75%, прозрачный); фоновый изображение: линейный градиент (45DEG, RGBA (255, 255, 255, .15) 25%, Transparent 25%, Transparent 50%, RGBA, 2555, 2555,. 50%, RGBA (255, 255, 255, .15) 75%, прозрачный 75%, прозрачный);}. 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255. 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 25%, прозрачный 25%, прозрачный 50%, RGBA (255, 255, 255,. Прозрачный); 75%, прозрачный);}. Перегременный. ПРОГРАММА-БАР-БАРНАЯ {Фоно-изображение: -Вебкит-линейр-градиент (45DEG, RGBA (255, 255, 255, .15) 25%, прозрачный 25%, прозрачный 50%, RGBA (255, 255, .15) 50%, RGBA (2555555%,. 75%, transparent);background-image:linear-gradient(45deg, rgba(255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, .15) 25%, transparent 25%, прозрачный 50%, RGBA (255, 255, 255, .15) 50%, RGBA (255, 255, 255, .15) 75%, прозрачный 75%, прозрачный);}Давайте посмотрим на использование полосатых стержней прогресса:
<h1> полосатый план прогресса </h1> <div> <div role = "progressbar" aria-valuenow = "25" ария-валуэмин = "0" aria-valuemax = "100"> 25%</div> </div> <div> <dive = "progressbar" aria-valuemax = "40" aria-valuemax = "100" 100 "100" aria-valuemax = "0"> 40%</div> </div> <div> <div rol = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <div> <div olue = "progressbar" aria-valuenow = "40" aria-val aria-val aria-valax = "aria-valax =" aria-valax = "aria-valax =" aria-valax = "aria-valax =" 100 ". aria-valuemin = "0"> 60%</div> </div>
Динамическая полоса прогресса
Динамическая полоса Прогресса может быть реализована на основе бара прогресса. Прогресс и два класса.
Принцип реализации в основном достигается посредством анимации CSS3. Во-первых, анимация по прогрессам-полосам создается через @KeyFrames. Эта анимация в основном делает одну вещь, которая заключается в том, чтобы изменить положение фонового изображения, то есть значение фонового положения. Поскольку полосатый панель прогресса производится через линейный градиент CSS3, а линейно-градиент реализует фоновое изображение, соответствующее фону.
Вот исходный код CSS:
@-Webkit-keyFrames Progress-bar-stripes {from {background-position: 40px 0;} to {background-position: 0 0;}}@keyframes progress-bar-stripes {from {founal-position: 40px 0;} to {founder-position: 0 0;}}@KeyFrames просто создает эффект анимации. Если мы хотим, чтобы панель прогресса действительно двигался, нам нужно назвать анимацию «прогрессирующимися полосками», созданными @KeyFrames определенным образом, и запустить анимацию, чтобы вступить в силу через событие. В платформе начальной загрузки добавьте имя класса «Active» в контейнер с панели прогресса «Прогресс» и пусть загрузка документа будет завершена и коснитесь анимации «Прогресс-полоса
Соответствующий код стиля для анимации вызова выглядит следующим образом:
.progress.active .progress-bar {-webkit-animation: Progress-bar-полосы 2 линейные бесконечные; анимация: линейные полоски Progress-Bar 2s;}пример:
<h1> Динамическая полоса Прогресс-строка </h1> <div> <div role = "progressbar" aria-valuenow = "25" ария-валуэмин = "0" aria-valuemax = "100"> 25%</div> </div> <div> <div olue = "progressbar" aria-valuemax = "40" aria-valuemax = "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100" 100 "100". aria-valuemax = "0"> 40%</div> </div> <div> <div rol = "progressbar" aria-valuenow = "25" aria-valuemin = "0" aria-valuemax = "100"> 80%</div> </div> <div> <div olue = "progressbar" aria-valuenow = "40" aria-val aria-val aria-valax = "aria-valax =" aria-valax = "aria-valax =" aria-valax = "aria-valax =" 100 ". aria-valuemin = "0"> 60%</div> </div>
Эффект заключается в следующем (так как это изображение, которая выходит непосредственно из результата на веб -странице, она не может увидеть его динамический эффект здесь):
Каскадный план прогресса:
Прогресс укладки может собрать несовместимые бары прогресса вместе и организовать их горизонтально.
пример:
<div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
В дополнение к укладкам стержней прогресса цвета, вы также можете сложить полосатые стержни или смешать и складывать полосатые стержни с помощью полосатых стержней. Вам нужно только добавить соответствующие панели хода в контейнер «прогресс». Также обратите внимание, что сумма сложенных стержней прогресса не может быть более 100%.
Давайте посмотрим на пример:
<div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div> <div> </div>
Это подробное объяснение знаний компонентов Bootstrap Progress Prograph. Я надеюсь, что это будет полезно для всех!