• ENG
  • 2

    Cart

  • 4

    Notification View all

    • 30-04-2024Today
      Alice Goodwin

      Fashion should be fun. It shouldn't be labelled intellectual.

    • 28-06-20241 hour ago
      Herry Venter

      I am convinced that there can be luxury in simplicity.

    • 04-08-2024Today
      Loain Deo

      I feel that things happen for open new opportunities.

    • 12-11-2024Yesterday
      Fenter Jessy

      Sometimes the simplest things are the most profound.

  • Bookmark

  • 15

  • user
    Ava Davis

    Admin

Progress bar

  2. Ui Kits
  3. Progress bar

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.

25%
50%
75%
100%

Striped Bar

Add .progress-bar-striped class to set the striped progress-bar

Animated Bar

To set the animated progress-bar use .progress-bar-animated class.

Multiple bars

To set the multiple progress-bar with the help of progress class.

Steps Bar

To set the number steps progress bar use .position-wrapper class.

Custom Bars

Set the animated striped progress-bar with help of .progress-bar-animated & .progress-bar-striped class.

0% Getting Started
30% Getting Uploading...
30%
60% Getting Pause...
60%
70% Getting Uploading...
70%
100% Completed
100%

Small Progress Bars

Use .sm-progress-bar class to set the small size of progress bar.

30 MB Data
50 MB Data
75 MB Data

Large Progress Bars

Set the large progress bar with the help of .lg-progress-bar class.

25%
50%
75%
100%

Custom Sizes

customize the progress bar height with the help of giving height to bar.