Settings

close
New Order Notification
Low Stock Alerts
Vacation Mode
Order Tracking
Newsletter Subscription
Show Review
Enable Wallet
Sales Report
Select Account

Progress Bars

  1. Home
  2. Basic UI
  3. Progress Bars
Default Progressbar
We use the .progress as a wrapper to indicate the max value of the progress bar.
Color Progressbar
Use background utility classes to change the appearance of individual progress bars.
Striped Progressbar
Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar’s background color.
Animated Stripped Progressbar
The striped gradient can also be animated. Add .progress-bar-animated to .progress-bar to animate the stripes right to left via CSS3 animations.
Sizing Progressbar
We only set a height value on the .progress, so if you change that value the inner .progress-bar will automatically resize accordingly.
Multiple Progressbar
Include multiple progress bars in a progress component if you need.

Labels Progressbar

Add labels to your progress bars by placing text within the .progress-bar.

25%

© 2020 Soyuz - All Rights Reserved.