How Can I Add Progress Bar In Bootstrap Carousel

Posted By Bajarangi soft , Posted On 01-10-2020

A progress bar can be used to show a user how far along he/she is in a process,To create a default progress bar, add a .progress class to a container element and add the .progress-bar class to its child element. Use the CSS width property to set the width of the progress bar,The height of the progress bar is 16px by default. Use the CSS height property to change it. Note that you must set the same height for the progress container and the progress bar:

1.Progress Bar In Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h2>Progress Bar Height</h2>
    <p>The height of the progress bar is 1rem (16px) by default. Use the CSS height property to change the height:</p>
    <div class="progress" style="height:10px">
        <div class="progress-bar" style="width:40%;height:10px"></div>
    </div>
    <br>
    <div class="progress" style="height:20px">
        <div class="progress-bar" style="width:50%;height:20px"></div>
    </div>
    <br>
    <div class="progress" style="height:30px">
        <div class="progress-bar" style="width:60%;height:30px"></div>
    </div>
</div>


<div class="container">
    <h2>Progress Bar With Label</h2>
    <div class="progress">
        <div class="progress-bar" style="width:70%">70%</div>
    </div>
</div>
</body>
</html>

2.Colored and Striped Progress Bar

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
    <h2>Colored Progress Bars</h2>
    <p>Use any of the contextual color classes to change the color of the progress bar:</p>
    <!-- Blue -->
    <div class="progress">
        <div class="progress-bar" style="width:10%"></div>
    </div><br>

    <!-- Green -->
    <div class="progress">
        <div class="progress-bar bg-success" style="width:20%"></div>
    </div><br>

    <!-- Turquoise -->
    <div class="progress">
        <div class="progress-bar bg-info" style="width:30%"></div>
    </div><br>

    <!-- Orange -->
    <div class="progress">
        <div class="progress-bar bg-warning" style="width:40%"></div>
    </div><br>

    <!-- Red -->
    <div class="progress">
        <div class="progress-bar bg-danger" style="width:50%"></div>
    </div><br>

    <!-- White -->
    <div class="progress border">
        <div class="progress-bar bg-white" style="width:60%"></div>
    </div><br>

    <!-- Grey -->
    <div class="progress">
        <div class="progress-bar bg-secondary" style="width:70%"></div>
    </div><br>

    <!-- Light Grey -->
    <div class="progress border">
        <div class="progress-bar bg-light" style="width:80%"></div>
    </div><br>

    <!-- Dark Grey -->
    <div class="progress">
        <div class="progress-bar bg-dark" style="width:90%"></div>
    </div>
</div>
<!---striped progress bar--->
<div class="container">
    <h2>Striped Progress Bars</h2>
    <p>The .progress-bar-striped class adds stripes to the progress bars:</p>
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width:30%"></div>
    </div>
    <br>
    <div class="progress">
        <div class="progress-bar bg-success progress-bar-striped" style="width:40%"></div>
    </div>
    <br>
    <div class="progress">
        <div class="progress-bar bg-info progress-bar-striped" style="width:50%"></div>
    </div>
    <br>
    <div class="progress">
        <div class="progress-bar bg-warning progress-bar-striped" style="width:60%"></div>
    </div>
    <br>
    <div class="progress">
        <div class="progress-bar bg-danger progress-bar-striped" style="width:70%"></div>
    </div>
</div>

</body>
</html>

3.Animated Progress Bar

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Animated Progress Bar</h2>
    <p>Add the .progress-bar-animated class to animate the progress bar:</p>
    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>
    </div>
</div>

<!---multiple progress bar--->
<div class="container">
    <h2>Multiple Progress Bars</h2>
    <p>Create a stacked progress bar by placing multiple bars into the same div with class="progress":</p>
    <div class="progress">
        <div class="progress-bar bg-success" style="width:40%">
            Free Space
        </div>
        <div class="progress-bar bg-warning" style="width:10%">
            Warning
        </div>
        <div class="progress-bar bg-danger" style="width:20%">
            Danger
        </div>
    </div>
</div>
</body>
</html>

Related Post

How To Create A Bootstrap Alert To Show Up
How Can I Add Progress Bar In Bootstrap Carousel
Which Class Creates a List of Groups In Bootstrap 4
How To Create a Card Box In Bootstrap 4
How Do I Create a Drop Down List In Bootstrap 4
How To Create Progress Bar Using CSS And JavaScript
How To Upload Videos With Progress Bar In JavaScript
How To Do Box Shadow with Progress Bar Style Using Bootstrap?
Horizontal Progress Bar Linear Progress Indicator Using Flutter
Liquid Progress Bar Indicator Using Flutter Android App