"Simple Flexible Loading Overlay Plugin With jQuery - loadingoverlay.js"
Bootstrap 3.0.0 Snippet by Divscodebd

Post to Facebook Tweet this

<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> <!------ Include the above in your HEAD tag ----------> <!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){ /***** Element 1 *****/ // Initialize Progress and show LoadingOverlay var progress1 = new LoadingOverlayProgress(); $("#element1").LoadingOverlay("show", { custom : progress1.Init() }); // Simulate some action: var count1 = 0; var iid1 = setInterval(function(){ if (count1 >= 100) { clearInterval(iid1); delete progress1; $("#element1").LoadingOverlay("hide"); return; } count1++; progress1.Update(count1); }, 100); /*********************/ /***** Element 2 *****/ // Initialize Progress and show LoadingOverlay, you can customize it using an object with "bar" and "text" properties: var progress2 = new LoadingOverlayProgress({ bar : { "background" : "#dd0000", "top" : "50px", "height" : "30px", "border-radius" : "15px" }, text : { "color" : "#aa0000", "font-family" : "monospace", "top" : "25px" } }); $("#element2").LoadingOverlay("show", { custom : progress2.Init() }); // Simulate some other action: var count2 = 0; var iid2 = setInterval(function(){ if (count2 >= 100) { clearInterval(iid2); delete progress2; $("#element2").LoadingOverlay("hide"); return; } count2++; progress2.Update(count2); }, 50); /*********************/ }); }); </script> </head> <body> <button id="progress_test">Extras "Progress" Test</button> <div class="col-md-3" id="element1">Element 1</div> <div class="col-md-3" id="element2">Element 2</div> <div class="col-md-12"> <iframe style="width:100%" height="315" src="https://www.youtube.com/embed/_kvp5phEGLE" frameborder="0" allowfullscreen></iframe> </div> </body> </html>

Related: See More

Rubik Presentation Page
loading circle
Lazy Loading Images with placeholders
Simple Vertical timeline

Questions / Comments: