Keen | Progress
Description: Bootstrap progress examples

# Customer Relationship Management

New Order

### Progress

Reports
Keen extends `Bootstrap Progress` component with a variety of options to provide uniquely looking Progress component that matches the Keen's design standards.
For more info please visit the plugin's Documentation.

### Basic Examples

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don’t use the HTML5 `< progress >` element, ensuring you can stack progress bars, animate them, and place text labels over them.

- We use the .progress as a wrapper to indicate the max value of the progress bar.
- We use the inner .progress-bar to indicate the progress so far.
- The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
- The .progress-bar also requires some role and aria attributes to make it accessible.

Put that all together, and you have the following examples.

### Labels

Add labels to your progress bars by placing text within the .progress-bar.
0%
25%
50%
75%
100%

### Height

We only set a height value on the `.progress`, so if you change that value the inner `.progress-bar` will automatically resize accordingly.

### Backgrounds

Use background utility classes to change the appearance of individual progress bars.

### Custom Backgrounds

Use background utility classes to change the appearance of individual progress bars.

### Multiple bars

Include multiple progress bars in a progress component if you need.

### Striped

Add `.progress-bar-striped` to any `.progress-bar` to apply a stripe via CSS gradient over the progress bar’s background color.

### Animated stripes

The striped gradient can also be animated. Add `.progress-bar-animated` to `.progress-bar` to animate the stripes right to left via CSS3 animations.

### Quick Actions

Orders
Uploades
Products
Customers
Blog Posts
Settings
02:30 PM
KeenThemes created new layout whith tens of new options for Keen Admin panel
HTML,CSS,VueJS
01:20 AM
New secyrity alert by Firewall & order to take aktion on User Preferences
Security, Fieewall
Yestardey
FlyMore design mock-ups been uploadet by designers Bob, Naomi, Richard
PSD, Sketch, AJ
Aug 13,2018
Meeting with Ken Digital Corp ot Unit14, 3 Edigor Buildings, George Street, Loondon
England, BA12FJ
Meeting, Customer
May 09, 2018
KeenThemes created new layout whith tens of new options for Keen Admin panel
HTML,CSS,VueJS
01:20 AM
New secyrity alert by Firewall & order to take aktion on User Preferences
Security, Fieewall

### Recent Bills

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Latest Orders

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Latest Invoices

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### New Comments

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View

### Recent Posts

Lorem Ipsum is simply dummy text of the printing and typesetting simply dummy text of the printing industry.
Dismiss View
Notifications
Enable notifications:
Enable audit log:
Notify on new orders:
Orders
Enable order tracking:
Enable orders reports:
Allow order status auto update:
Customers
Enable customer singup:
Enable customers reporting:
Notifiy on new customer registration:

- Demos

### Select A Demo

Demo 1
Default RTL Version
Demo 2
Default RTL Version
Demo 3
Default RTL Version
Demo 4
Default RTL Version
Demo 5
Default RTL Version
Demo 6
Default RTL Version
Demo 7
Coming soon
Demo 8
Coming soon
Demo 9
Coming soon
Buy Keen Now!