Basic Progress Bars

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.

Customizing

Sizing

Sizing

Use .m-progress--sm class to change progress size to small:
Use .m-progress--lg class to change progress size to large:

Custom Height

Set a height value on the .progress-bar , so if you change that value the outer .progress will automatically resize accordingly.

Progress States

Backgrounds

Use state 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.
The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.
Megan wrote
Hi Bob. What time will be the meeting ?
Hi Megan. It's at 2.30PM
Megan wrote
Will the development team be joining ?
Yes sure. I invited them as well
2:30PM
Megan wrote
Noted. For the Coca-Cola Mobile App project as well ?
Yes, sure.
Please also prepare the quotation for the Loop CRM project as well.
3:15PM
M
Megan wrote
Noted. I will prepare it.
Thanks Megan. I will see you later.
Megan wrote
Sure. See you in the meeting soon.
General Settings
Email Notifications
Site Tracking
SMS Alerts
Backup Storage
Audit Logs
System Settings
System Logs
Error Reporting
Applications Logs
Backup Servers
Audit Logs