New version of Bootstrap 5 comes without the dependency of JQuery. Bootstrap 5 is self sufficient to work in your application. You don’t need to include any version of JQuery.
There are many useful components offered by Bootstrap 5 library. One of the component is Progress bar. You can use this when you are doing some heavy work in browser and it is taking some time. During that time you can intimate the user how much work is completed and how much is remaining. This way application user will remain calm and will not click anywhere else which can disturb the progress of the work.
Example of Progress bar in bootstrap 5
Full working code is provided here which can be extended in your application.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy" crossorigin="anonymous"></script>
</head>
<body>
<div class="container m-5">
<h2 align="center">Example of Progress bar in bootstrap 5</h2>
<div class="progress">
<div id="progressBar" class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>
<div class="m-2 text-center">
<input type="button" value="Reset" onclick="resetProgress()">
<input type="button" value="Increase" onclick="doIncrement(5)">
</div>
</div>
<script>
function resetProgress() {
document.getElementById("progressBar").innerHTML="25%";
document.getElementById('progressBar').style.width= '25%';
}
function doIncrement(increment) {
w = parseInt(document.getElementById('progressBar').style.width);
if((w+increment) <=100) {
pb = document.getElementById("progressBar");
pb.innerHTML = (w+increment)+"%";
document.getElementById('progressBar').style.width= (w + increment) +'%';
}else{
alert("Max percentage reached...");
}
}
</script>
</body>
</html>
Do let me know if this code was helpful to you in your application
Leave a Reply