<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LoadingOverlay Extras - Progress - Test</title>
<style>
#progress_test {
display : block;
margin : 20px;
font : 12pt/1.2 sans-serif;
font-weight : bold;
padding : 6px;
}
.col-md-3 {
display : inline-block;
margin-left : 20px;
font : 14pt/1.2 sans-serif;
text-align : center;
padding : 10px;
color : #303030;
background : #222;
height:400px;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@1.5.4/src/loadingoverlay.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gasparesganga-jquery-loading-overlay@1.5.4/extras/loadingoverlay_progress/loadingoverlay_progress.min.js"></script>
<script>
$(document).ready(function(){
$("#progress_test").on("click", function Example1(event){
