- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var height_equal          = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Progress
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Ui Kits
                    li.breadcrumb-item.active Progress
          // Container-fluid starts
          .container-fluid
            .row
              .col-sm-12
                .card
                  .card-header
                    h4 Basic Progress Bars
                    p.f-m-light.mt-1
                      | Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
                      | We use the 
                      code .progress 
                      | as a wrapper to indicate the max value of the progress bar. The 
                      code .progress-bar 
                      | requires an inline style, utility class, or custom CSS to set their width.
                  .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') 25%
                      .progress
                        .progress-bar.bg-secondary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100') 50%
                      .progress
                        .progress-bar.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100') 75%
                      .progress
                        .progress-bar.bg-info(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100') 100%
                .row
                  .col-xl-6
                    .card
                      .card-header
                        h4 Progress Bars Striped
                        p.f-m-light.mt-1
                          | Add 
                          code .progress-bar-striped
                          |  to any 
                          code .progress-bar 
                          |  to apply a stripe via CSS gradient over the progress bar's background color Using CSS Effects.
                      .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-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
                          .progress
                            .progress-bar.progress-bar-striped.bg-danger(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
                          .progress
                            .progress-bar.progress-bar-striped.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
                  .col-xl-6                          
                    .card
                      .card-header
                        h4 Progress Bars animated
                        p.f-m-light.mt-1
                          | 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-warning(role='progressbar', style='width: 25%', aria-valuenow='25', aria-valuemin='0', aria-valuemax='100')
                          .progress
                            .progress-bar-animated.progress-bar-striped.bg-danger(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
                          .progress
                            .progress-bar-animated.progress-bar-striped.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
                .row
                  .col-xl-6
                    .card
                      .card-header
                        h4 Multiple bars
                        p.f-m-light.mt-1
                          | 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')
                  .col-xl-6
                    .card
                      .card-header
                        h4 Progress With Number Steps
                        p.f-m-light.mt-1 
                          | Use the 
                          code .position-absolute 
                          | to set progress numbers steps.
                      .card-body 
                        .position-relative.m-4
                          .progress.progress-wrapper
                            .progress-bar(role='progressbar' aria-label='Progress' style='width: 50%;' aria-valuenow='50' aria-valuemin='0' aria-valuemax='100')
                          button.position-absolute.top-0.start-0.translate-middle.btn-sm.btn-primary.rounded-circle(type='button' style='width: 2rem; height:2rem;') 1
                          button.position-absolute.top-0.start-50.translate-middle.btn-sm.btn-primary.rounded-circle(type='button' style='width: 2rem; height:2rem;') 2
                          button.progress-btn.position-absolute.top-0.start-100.translate-middle.btn-sm.rounded-circle(type='button' style='width: 2rem; height:2rem;') 3
                .card
                  .card-header
                    h4 Custom Progress Bars
                    p.f-m-light.mt-1
                      | Use the 
                      code .progress-bar-animated 
                      | and 
                      code .progress-bar-striped 
                      | to animate the stripes right to left.
                  .card-body.progress-showcase.row
                    .col
                      h6.mb-2 0% Getting Started 
                      .progress.mb-4
                        .progress-bar-animated.progress-bar-striped.text-center(role='progressbar', aria-valuenow='0', aria-valuemin='0', aria-valuemax='100') 
                      h6.mb-2 30% Getting Uploading...
                      .progress.mb-4
                        .progress-bar-animated.progress-bar-striped.bg-primary.text-center(role='progressbar', style='width: 30%', aria-valuenow='30', aria-valuemin='0', aria-valuemax='100') 30%
                      h6.mb-2 60% Getting Pause...
                      .progress.mb-4
                        .progress-bar-animated.progress-bar-striped.bg-secondary.text-center(role='progressbar', style='width: 60%', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100') 60%
                      h6.mb-2 70% Getting Uploading...
                      .progress.mb-4
                        .progress-bar-animated.progress-bar-striped.bg-success.text-center(role='progressbar', style='width: 70%', aria-valuenow='70', aria-valuemin='0', aria-valuemax='100') 70%
                      h6.mb-2 100% Completed
                      .progress
                        .progress-bar-animated.progress-bar-striped.bg-dark.text-center(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100') 100%
                .row
                  .col-xl-6
                    .card.height-equal
                      .card-header
                        h4 Small Progress Bars
                        p.f-m-light.mt-1
                          | Use 
                          code  .sm-progress-bar
                          |   class to change progress size to small:
                      .card-body.progress-showcase.row.progress-b-space
                        .col
                          .progress.sm-progress-bar.overflow-visible.mt-4
                            .progress-bar-animated.small-progressbar.bg-primary.rounded-pill.progress-bar-striped(role='progressbar', style='width: 30%', aria-valuenow='30', aria-valuemin='0', aria-valuemax='100')
                              span.txt-primary.progress-label 30 MB Data
                              span.animate-circle
                          .progress.sm-progress-bar.overflow-visible
                            .progress-bar-animated.small-progressbar.bg-primary.rounded-pill.progress-bar-striped(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
                              span.txt-primary.progress-label 50 MB Data
                              span.animate-circle
                          .progress.sm-progress-bar.overflow-visible
                            .progress-bar-animated.small-progressbar.bg-primary.rounded-pill.progress-bar-striped(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100')
                              span.txt-primary.progress-label 75 MB Data
                              span.animate-circle
                          .progress.sm-progress-bar.overflow-visible
                            .progress-bar-animated.small-progressbar.bg-primary.rounded-pill.progress-bar-striped(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100')
                              span.txt-primary.progress-label 100 MB Data
                              span.animate-circle
                  .col-xl-6
                    .card.height-equal
                      .card-header
                        h4 Large Progress Bars
                        p.f-m-light.mt-1
                          | Use 
                          code  .lg-progress-bar
                          |   class to change progress size to large:
                      .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') 25%
                          .progress.lg-progress-bar
                            .progress-bar.bg-secondary(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100') 50%
                          .progress.lg-progress-bar
                            .progress-bar.bg-success(role='progressbar', style='width: 75%', aria-valuenow='75', aria-valuemin='0', aria-valuemax='100') 75%
                          .progress.lg-progress-bar
                            .progress-bar.bg-info(role='progressbar', style='width: 100%', aria-valuenow='100', aria-valuemin='0', aria-valuemax='100') 100%
                .card
                  .card-header
                    h4 Custom Height Progress Bars
                    p.f-m-light.mt-1
                      | 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-warning(role='progressbar', style='width: 50%', aria-valuenow='50', aria-valuemin='0', aria-valuemax='100')
                      .progress(style='height: 11px;')
                        .progress-bar.bg-danger(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')
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
