BOOTSTRAP create bootstrap loading bar - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!

Just a Web Code Solution
join us

How to create bootstrap loading bar ?


 242

Show ResultBOOTSTRAP


1

<!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>

By        
The power of the user (%)
80%

The most helpful BOOTSTRAP solutions

loading bar bootstraploading bar bootstrapBOOTSTRAP

Click to see more ...

  1.1K     71
How create progress bar using bootstrap ?How create progress bar using bootstrap ?BOOTSTRAP

Click to see more ...

  591     63
How to create bootstrap media object ?How to create bootstrap media object ?BOOTSTRAP

Click to see more ...

  721     53
How create scrollable dropdown menu in bootstrap ?How create scrollable dropdown menu in bootstrap ?BOOTSTRAP

Click to see more ...

  552     49
table bootstraptable bootstrapBOOTSTRAP

Click to see more ...

  518     42
How to set bootstrap checkboxes inline ?How to set bootstrap checkboxes inline ?BOOTSTRAP

Click to see more ...

  377     41
How create bootstrap navbarHow create bootstrap navbarBOOTSTRAP

Click to see more ...

  621     33
how to create a bootstrap banner with help of alert ?how to create a bootstrap banner with help of alert ?BOOTSTRAP

Click to see more ...

  266     31
How create fixed navbar in bootstrapHow create fixed navbar in bootstrapBOOTSTRAP

Click to see more ...

  341     24
How to create bootstrap input file ?How to create bootstrap input file ?BOOTSTRAP

Click to see more ...

  235     19
Welcome aboard!
We are happy you are here and
wish you good net-raft!