Progress | Velzon - Admin & Dashboard Template

#### Are you sure ?

Are you sure you want to remove this Notification ?

#### Progress

#### Default Progress

Show Code

Use `progress` class to show default progress.

    <!-- Base Examples -->
    <div class="progress mb-4">
        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress mb-4">
        <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress mb-4">
        <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress mb-4">
        <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

#### Progress with background color

Show Code

Use `bg-` class to progress bar class with the below-mentioned color variation to set the background color progress bar.

    <!-- Backgrounds -->
    <div class="progress mb-4">
        <div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress mb-4">
        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress mb-4">
        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress mb-4">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

#### Progress with Label

Show Code

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

25%

    <!-- Labels Example -->
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
    </div>

#### Multiple Bars

Show Code

Use `bg-` class to progress bar class with the below-mentioned color to change the appearance of individual progress bars.

    <!-- Multiple Bars -->
    <div class="progress">
        <div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
        <div class="progress-bar bg-success" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
        <div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

#### Height

Show Code

Use `progress-sm`, `progress-lg`, or `progress-xl` class to set the different heights of progress.

##### Small Progress

##### Default Progress

##### Large Progress

##### Extra Large Progress

    <!-- Prgress sm -->
    <div class="progress progress-sm">
        <div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Prgress Default -->
    <div class="progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Prgress lg -->
    <div class="progress progress-lg">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <!-- Prgress xl -->
    <div class="progress progress-xl">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

#### Striped Progress

Show Code

Use `progress-bar-striped` class to add strip to the progress.

    <!-- Striped Prgress -->
    <div class="progress">
        <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

#### Animated Striped Progress

Show Code

Use `progress-bar-striped progress-bar-animated` class to add strip with animation to the progress.

    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
    </div>

#### Gradient Progress

Show Code

Use `bg-gradient` class to show gradient progress bar.

    <div class="progress">
        <div class="progress-bar bg-primary bg-gradient" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success bg-gradient" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-info bg-gradient" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning bg-gradient" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger bg-gradient" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

#### Animated Progress

Show Code

Use `animated-progress` class to show progress with animation.

    <div class="progress animated-progress">
        <div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress animated-progress">
        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress animated-progress">
        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress animated-progress">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress animated-progress">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

#### Custom Progress

Show Code

Use `animated-progress custom-progess` class to show custom progress with animation.

    <div class="progress animated-progress custom-progress mb-4">
        <div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress animated-progress custom-progress mb-4">
        <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress animated-progress custom-progress mb-4">
        <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress animated-progress custom-progress mb-4">
        <div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
    </div>
    <div class="progress animated-progress custom-progress">
        <div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

#### Custom Progress with Label

Show Code

Use `animated-progress custom-progess progress-label` class to show custom progress with animation and label.

15%
25%
30%

    <div class="d-flex align-items-center pb-2">
        <div class="flex-shrink-0 me-3">
            <div class="avatar-xs">
                <div class="avatar-title bg-light rounded-circle text-muted fs-16">
                    <i class="mdi mdi-facebook"></i>
                </div>
            </div>
        </div>
        <div class="flex-grow-1">
            <div class="progress animated-progress custom-progress progress-label">
                <div class="progress-bar bg-primary" role="progressbar" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"><div class="label">15%</div></div>
            </div>
        </div>
    </div>

    <div class="d-flex align-items-center py-2">
        <div class="flex-shrink-0 me-3">
            <div class="avatar-xs">
                <div class="avatar-title bg-light rounded-circle text-muted fs-16">
                    <i class="mdi mdi-twitter"></i>
                </div>
            </div>
        </div>
        <div class="flex-grow-1">
            <div class="progress animated-progress custom-progress progress-label">
                <div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"><div class="label">25%</div></div>
            </div>
        </div>
    </div>

    <div class="d-flex align-items-center py-2">
        <div class="flex-shrink-0 me-3">
            <div class="avatar-xs">
                <div class="avatar-title bg-light rounded-circle text-muted fs-16">
                    <i class="mdi mdi-github"></i>
                </div>
            </div>
        </div>
        <div class="flex-grow-1">
            <div class="progress animated-progress custom-progress progress-label">
                <div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"><div class="label">30%</div></div>
            </div>
        </div>
    </div>

#### Content Progress

Show Code

Example of progress with content wrapped in progress.

###### 30% Update in progress...

###### 1 min left

###### 60% Update in progress...

###### 45s left

###### 82% Update in progress...

###### 25s left

    <div class="card bg-light overflow-hidden">
        <div class="card-body">
            <div class="d-flex">
                <div class="flex-grow-1">
                    <h6 class="mb-0"><b class="text-secondary">30%</b> Update in progress...</h6>
                </div>
                <div class="flex-shrink-0">
                    <h6 class="mb-0">1 min left</h6>
                </div>
            </div>
        </div>
        <div class="progress bg-secondary-subtle rounded-0">
            <div class="progress-bar bg-secondary" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>

    <div class="card bg-light overflow-hidden">
        <div class="card-body">
            <div class="d-flex">
                <div class="flex-grow-1">
                    <h6 class="mb-0"><b class="text-success">60%</b> Update in progress...</h6>
                </div>
                <div class="flex-shrink-0">
                    <h6 class="mb-0">45s left</h6>
                </div>
            </div>
        </div>
        <div class="progress bg-success-subtle rounded-0">
            <div class="progress-bar bg-success" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>

    <div class="card bg-light overflow-hidden">
        <div class="card-body">
            <div class="d-flex">
                <div class="flex-grow-1">
                    <h6 class="mb-0"><b class="text-danger">82%</b> Update in progress...</h6>
                </div>
                <div class="flex-shrink-0">
                    <h6 class="mb-0">25s left</h6>
                </div>
            </div>
        </div>
        <div class="progress bg-danger-subtle rounded-0">
            <div class="progress-bar bg-danger" role="progressbar" style="width: 82%" aria-valuenow="82" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
    </div>

#### Progress with Steps

Show Code

Here is the example of progress which is represented by steps completion.

    <div class="position-relative m-4">
        <div class="progress" style="height: 1px;">
            <div class="progress-bar" role="progressbar" style="width: 50%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
        </div>
        <button type="button" class="position-absolute top-0 start-0 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">1</button>
        <button type="button" class="position-absolute top-0 start-50 translate-middle btn btn-sm btn-primary rounded-pill" style="width: 2rem; height:2rem;">2</button>
        <button type="button" class="position-absolute top-0 start-100 translate-middle btn btn-sm btn-light rounded-pill" style="width: 2rem; height:2rem;">3</button>
    </div>

#### Step Progress with Arrow

Show Code

Use `progress-step-arrow` class to create step progress with an arrow.

Step 1
Step 2
Step 3

    <div class="progress progress-step-arrow progress-info">
        <a href="javascript:void(0);" class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Step 1</a>
        <a href="javascript:void(0);" class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"> Step 2</a>
        <a href="javascript:void(0);" class="progress-bar bg-light text-body" role="progressbar" style="width: 100%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> Step 3</a>
    </div>;

Loading...

##### Theme Customizer

###### Layout

Choose your layout

##### Vertical

##### Horizontal

##### Two Column

##### Semi Box

###### Color Scheme

Choose Light or Dark Scheme.

##### Light

##### Dark

###### Layout Width

Choose Fluid or Boxed layout.

##### Fluid

##### Boxed

###### Layout Position

Choose Fixed or Scrollable Layout Position.

Fixed Scrollable

###### Topbar Color

Choose Light or Dark Topbar Color.

##### Light

##### Dark

###### Background Image

Choose a body background image.

##### None

##### One

##### Two

##### Three