Progress
-
3
Notifications
-
Emay Walter liked your post
10 minutes ago -
Allie Gratershared your post
5 hours ago -
Colin Sikcommented on your post
yesterday - Check all
-
-
2
Jane Cooper
active
-
Hello.how are you?
-
Hi, i'm fine.what about you?
-
I am facing js issue can you help me?
-
Sure, i will help you.
-
-
-
2
-
Wade Warren
UI DesignerBasic progress bars
Progress components are built with two HTML elements, some CSS to set the width, and a few attributes.
We use the .progress as a wrapper to indicate the max value of the progress bar. The .progress-bar requires an inline style, utility class, or custom CSS to set their width.
Progress bars striped
Add .progress-bar-striped to any .progress-bar to apply a stripe via CSS gradient over the progress bar's background color Using CSS Effects.
Progress bars animated
The striped gradient can also be animated. Add .progress-bar-animated to.progress-bar to animate the stripes right to left via CSS3 animations.
Multiple bars
Include multiple progress bars in a progress component if you need.
Progress with number steps
Use the .position-absolute to set progress numbers steps.
Custom progress bars
Use the .progress-bar-animated and .progress-bar-striped to animate the stripes right to left.
0% Getting Started
30% Getting Uploading...
60% Getting Pause...
70% Getting Uploading...
100% Completed
Small progress bars
Use .sm-progress-bar class to change progress size to small.
Large progress bars
Use .lg-progress-bar class to change progress size to large.
Custom height progress bars
Set a height value on the .progress-bar, so if you change that value the outer.progress will automatically resize accordingly.