- 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
