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 ?


 364

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.2K     71
How create progress bar using bootstrap ?How create progress bar using bootstrap ?BOOTSTRAP

Click to see more ...

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

Click to see more ...

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

Click to see more ...

  680     49
table bootstraptable bootstrapBOOTSTRAP

Click to see more ...

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

Click to see more ...

  505     41
How create bootstrap navbarHow create bootstrap navbarBOOTSTRAP

Click to see more ...

  742     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 ...

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

Click to see more ...

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

Click to see more ...

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