232 lines
15 KiB
Plaintext
232 lines
15 KiB
Plaintext
- 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
|