A progress bar is used to display the progress of a process on a computer. A progress bar displays how much of the process is completed and how much is left. You can add a progress bar on a web page using predefined bootstrap classes. Bootstrap provides many types of progress bars.
Syntax:
<div class="progress"> <div class="progress-bar" style="width:x%"></div> <div>
Example 1:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap Progress Bar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color:green;text-align:center;">
GeeksforGeeks
</h1>
<div class="container">
<div class="progress">
<div class="progress-bar" style="width:80%"></div>
</div>
</div>
</body>
</html>
|
Output:
We will learn about contextual-classes in Progress bar: The contextual classes that can be used with progress bars are:
- .bg-success
- .bg-info
- .bg-warning
- .bg-danger
In simple language; we can give different colors to the progress bar.
- Success: Shade of Green colour (#5cb85c)
- Danger: Shade of Red colour (#d9534f)
- Warning: Shade of Yellow colour ( #f0ad4e)
- Info: Shade of Blue colour(#5bc0de)
NOTE: The default color of the progress bar is blue.
Example 2:
HTML
<!DOCTYPE html> <html lang="en">
<head>
<title>Bootstrap Progress Bar</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<script src=
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<div class="container">
<div class="progress">
<div class="progress-bar" style="width:30%;">
30% Complete (Default)
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
40% Complete (success)
</div>
</div>
<div class="progress">
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">
50% Complete (info)
</div>
</div>
<div class="progress">
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">
60% Complete (warning)
</div>
</div>
<div class="progress">
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
70% Complete (danger)
</div>
</div>
</div>
</body>
</html>
|
Output: