- var theme_customizer = true; - var tooltip = true; doctype html html(lang='en') include ../../components/header-files body include ../../components/loader // page-wrapper Start #pageWrapper.page-wrapper include ../../components/header // Page Body Start .page-body-wrapper.horizontal-menu include ../../components/sidebar .page-body .container-fluid .page-header .row .col-sm-6 h3 | Progress ol.breadcrumb li.breadcrumb-item a(href='index.html') | Home li.breadcrumb-item Base li.breadcrumb-item.active Progress .col-sm-6 include ../../components/bookmark // Container-fluid starts .container-fluid .row .col-sm-12 .card .card-header.pb-0 h5 Basic Progress Bars span | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. .card-body.progress-showcase.row .col .progress .progress-bar(role='progressbar', aria-valuenow='0', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.bg-primary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.bg-secondary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.bg-info(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100') .card .card-header.pb-0 h5 Small Progress Bars span | Use code .sm-progress-bar | class to change progress size to small: .card-body.progress-showcase.row .col .progress.sm-progress-bar .progress-bar.bg-primary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100') .progress.sm-progress-bar .progress-bar.bg-secondary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100') .progress.sm-progress-bar .progress-bar.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100') .progress.sm-progress-bar .progress-bar.bg-info(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100') .card .card-header.pb-0 h5 Large Progress Bars span | Use code .lg-progress-bar | class to change progress size to small: .card-body.progress-showcase.row .col .progress.lg-progress-bar .progress-bar.bg-primary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100') .progress.lg-progress-bar .progress-bar.bg-secondary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100') .progress.lg-progress-bar .progress-bar.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100') .progress.lg-progress-bar .progress-bar.bg-info(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100') .card .card-header.pb-0 h5 Custom Height Progress Bars span | Set a height value on the code .progress-bar | , so if you change that value the outer code .progress | will automatically resize accordingly. .card-body.progress-showcase.row .col .progress(style='height: 1px;') .progress-bar.bg-primary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100') .progress(style='height: 5px;') .progress-bar.bg-secondary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100') .progress(style='height: 11px;') .progress-bar.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100') .progress(style='height: 19px;') .progress-bar.bg-info(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100') .card .card-header.pb-0 h5 Progress Bars states span Use state utility classes to change the appearance of individual progress bars. .card-body.progress-showcase.row .col .progress .progress-bar.bg-primary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.bg-secondary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.bg-info(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100') .card .card-header.pb-0 h5 Multiple bars span Include multiple progress bars in a progress component if you need. .card-body.progress-showcase.row .col .progress .progress-bar.bg-primary(role='progressbar', style='width: 30%', aria-valuenow='30', aria-valuemin='0', aria-valuemax='100') .progress-bar.bg-secondary(role='progressbar', style='width: 20%', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100') .progress-bar.bg-success(role='progressbar', style='width: 15%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.bg-primary(role='progressbar', style='width: 10%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100') .progress-bar.bg-secondary(role='progressbar', style='width: 10%', aria-valuenow='30', aria-valuemin='0', aria-valuemax='100') .progress-bar.bg-success(role='progressbar', style='width: 10%', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100') .progress-bar.bg-info(role='progressbar', style='width: 10%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100') .progress-bar.bg-warning(role='progressbar', style='width: 10%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100') .progress-bar.bg-danger(role='progressbar', style='width: 10%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100') .progress-bar.bg-primary(role='progressbar', style='width: 10%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100') .progress-bar.bg-light(role='progressbar', style='width: 10%', aria-valuenow='15', aria-valuemin='0', aria-valuemax='100') .card .card-header.pb-0 h5 Progress Bars Striped span | Add code .progress-bar-striped | to any code .progress-bar | to apply a stripe via CSS gradient over the progress bar’s background color. .card-body.progress-showcase.row .col .progress .progress-bar.bg-primary.progress-bar-striped(role='progressbar', style='width: 10%', aria-valuenow='10', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.progress-bar-striped.bg-secondary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.progress-bar-striped.bg-success(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar.progress-bar-striped.bg-info(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100') .card .card-header.pb-0 h5 Progress Bars animated span | The striped gradient can also be animated. Add code .progress-bar-animated | to code .progress-bar | to animate the stripes right to left via CSS3 animations. .card-body.progress-showcase.row .col .progress .progress-bar-animated.bg-primary.progress-bar-striped(role='progressbar', style='width: 10%', aria-valuenow='10', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar-animated.progress-bar-striped.bg-secondary(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar-animated.progress-bar-striped.bg-success(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100') .progress .progress-bar-animated.progress-bar-striped.bg-info(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100') // Container-fluid Ends include ../../components/footer include ../../components/footer-files