179 lines
13 KiB
Plaintext
179 lines
13 KiB
Plaintext
- 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
|