Bootstrap Progress Bars

Bootstrap is a free and open source front end development framework for the creation of websites and web apps.
Post Reply
User avatar
C0D3D
Site Admin
Posts: 159
Joined: Sun Jun 26, 2022 10:46 pm
Contact:
Contact C0D3D

Bootstrap Progress Bars

Post by C0D3D »

Creating progress bars with Bootstrap

Example 1

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Adding space at the bottom of progress bar */
    .progress{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="m-4">
    <div class="progress">
        <div class="progress-bar" style="width: 25%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 50%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 75%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 100%"></div>
    </div>
</div>
</body>
</html>


Adding label to a progress bar in Bootstrap

Example 2

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Progress Bar with Label</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Adding space at the bottom of progress bar */
    .progress{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="m-4">
    <div class="progress">
        <div class="progress-bar" style="width: 25%">
            25%
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 50%">
            50%
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 75%">
            75%
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar" style="width: 100%">
            100%
        </div>
    </div>
</div>
</body>
</html>



Changing the height of a progress bar in Bootstrap

Example 3

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Height Sizing of Bootstrap Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Adding space at the bottom of progress bar */
    .progress{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="m-4">
    <!-- Progress bar with 1px height -->
    <div class="progress" style="height: 1px;">
        <div class="progress-bar" style="width: 50%;"></div>
    </div>
  
    <!-- Progress bar with 20px height -->
    <div class="progress" style="height: 20px;">
        <div class="progress-bar" style="width: 50%;"></div>
    </div>
</div>
</body>
</html>

Creating stripped progress bars with Bootstrap

Example 4

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Stripped Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="width: 60%;"></div>
    </div>
</div>
</body>
</html>



Creating animated progress bars with Bootstrap

Example 5

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Animated Progress Bar</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="progress">
        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 60%"></div>
    </div>
</div>
</body>
</html>



Changing the value of a Bootstrap progress bar dynamically

Example 6

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dynamically Change Bootstrap Progress Bar Value Using JavaScript</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <!-- Progress bar HTML -->
    <div class="progress">
        <div class="progress-bar progress-bar-striped" style="min-width: 20px;"></div>
    </div>

    <!-- JavaScript -->
    <script>
        var i = 0;
      	var bar = document.querySelector(".progress-bar");
        function makeProgress(){
            if(i < 100){
                i = i + 1;
              	bar.style.width = i + "%";
              	bar.innerText = i + "%";
            }

            // Wait for sometime before running this script again
            setTimeout("makeProgress()", 100);
        }
        makeProgress();
    </script>
</div>
</body>
</html>


Creating stacked progress bars with Bootstrap

Example 7

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Stacked Progress Bars</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
    <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%">
            Program Files (40%)
        </div>
        <div class="progress-bar bg-warning" style="width: 25%">
            Residual Files (25%)
        </div>
        <div class="progress-bar bg-danger" style="width: 15%">
            Junk Files (15%)
        </div>
    </div>  
</div>
</body>
</html>


Creating multi-color progress bars in Bootstrap

Example 8

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Progress Bars with Emphasis Classes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Adding space at the bottom of progress bar */
    .progress{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="m-4">
    <div class="progress">
        <div class="progress-bar bg-info" style="width: 20%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning" style="width: 80%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger" style="width: 90%"></div>
    </div>

    <hr>

    <div class="progress">
        <div class="progress-bar bg-info" style="width: 20%">
            Disk Space: 80% free
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-success" style="width: 40%">
            Enough Disk Space: 60% free
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-warning" style="width: 80%">
            Low Disk Space: 80% full
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar bg-danger" style="width: 90%">
            Not Enough Disk Space: 90% full
        </div>
    </div>
</div>
</body>
</html>




Creating multi-color striped progress bars in Bootstrap

Example 9

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Striped Progress Bars with Emphasis Classes</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<style>
    /* Adding space at the bottom of progress bar */
    .progress{
        margin-bottom: 1rem;
    }
</style>
</head>
<body>
<div class="m-4">
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-info" style="width: 20%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-success" style="width: 40%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-warning" style="width: 80%"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-danger" style="width: 90%"></div>
    </div>
  
    <hr />
  
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-info" style="width: 20%">
            Disk Space: 80% free
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-success" style="width: 40%">
            Enough Disk Space: 60% free
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-warning" style="width: 80%">
            Low Disk Space: 80% full
        </div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-striped bg-danger" style="width: 90%">
            Not Enough Disk Space: 90% full
        </div>
    </div>
</div>
</body>
</html>
----------------------------------------------------------------------
Together we are one! One we are many... Much Love from one brother to another...
Working together to achieve amazing things!
Teamwork is key.
Knowledge is Power!

4 Basic datatypes.
Strings: Which store a series of characters.
Int: Which store a full integer or number.
Float: A numeric value with a decimal.
Boolean: Only stores True or False and are very useful with if statements
----------------------------------------------------------------------
ImgBB Image upload
Top
Post Reply

Return to “_._Bootstrap_._”

Who is online

Users browsing this forum: Ahrefs [Bot], Semrush [Bot] and 0 guests