Дакументацыя і прыклады выкарыстання карыстальніцкіх індыкатараў прагрэсу Bootstrap з падтрымкай стэк-бараў, аніміраванага фону і тэкставых метак.
Як гэта працуе
Кампаненты Progress складаюцца з двух элементаў HTML, невялікай колькасці CSS для ўстаноўкі шырыні і некалькіх атрыбутаў. Мы не выкарыстоўваем элемент HTML5<progress> , гарантуючы, што вы можаце складаць індыкатары прагрэсу, анімаваць іх і размяшчаць над імі тэкставыя цэтлікі.
Мы выкарыстоўваем у .progressякасці абгорткі, каб паказаць максімальнае значэнне індыкатара выканання.
Мы выкарыстоўваем inner .progress-bar, каб паказаць прагрэс да гэтага часу.
Патрабуецца .progress-barўбудаваны стыль, службовы клас або карыстацкі CSS, каб задаць іх шырыню.
Таксама .progress-barпатрабуецца некаторыя атрыбуты roleі aria, каб зрабіць яго даступным.
Збярыце ўсё гэта разам, і вы атрымаеце наступныя прыклады.
Bootstrap забяспечвае некалькі ўтыліт для ўстаноўкі шырыні . У залежнасці ад вашых патрэбаў, яны могуць дапамагчы ў хуткай канфігурацыі прагрэсу.
Этыкеткі
Дадайце этыкеткі на панэлі прагрэсу, размясціўшы тэкст у полі .progress-bar.
25%
Вышыня
Мы ўсталёўваем heightзначэнне толькі для .progress, таму, калі вы зменіце гэтае значэнне, унутраны .progress-barпамер аўтаматычна зменіцца адпаведна.
Фоны
Выкарыстоўвайце фонавыя класы ўтыліт, каб змяніць выгляд асобных індыкатараў прагрэсу.
Некалькі бараў
Уключыце некалькі індыкатараў прагрэсу ў кампанент прагрэсу, калі вам трэба.
Паласаты
Дадайце .progress-bar-stripedда любога .progress-bar, каб прымяніць паласу з дапамогай градыенту CSS да колеру фону панэлі прагрэсу.
Аніміраваныя палоскі
Паласаты градыент таксама можа быць аніміраваны. Дадайце .progress-bar-animatedдля .progress-barанімацыі палос справа налева з дапамогай анімацыі CSS3.