Welcome aboard! We are happy you are here and wish you good net-raft!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.container {
max-width:800px;
}
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
</style>
</head>
<body>
<button id="btn_show">show</button>
<!-- loading bar -->
<div class="modal fade" id="loadingbar" role="dialog">
<div class="modal-dialog modal-sm">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body" style="padding:40px 50px;">
<div class="form-group" style="text-align: center;">
LOADING ...
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="50" style="width:100%">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#btn_show").click(function () {
$("#loadingbar").modal("show");
});
</script>
</body>
</html>
The most helpful BOOTSTRAP solutions
loading bar bootstrapBOOTSTRAP Click to see more ... 1.1K 71