jquery-loading-overlay-css-animation
Version:
A flexible loading overlay jQuery Plugin with loading gif replaced with css animation.
94 lines (92 loc) • 4.26 kB
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;
}
.container {
display : inline-block;
margin-left : 20px;
width : 500px;
height : 250px;
border : 1px solid #008800;
font : 14pt/1.2 sans-serif;
text-align : center;
padding : 10px;
color : #303030;
background : #ffdd88;
}
</style>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="../../src/loadingoverlay.min.js"></script>
<script src="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="container" id="element1">Element 1</div>
<div class="container" id="element2">Element 2</div>
</body>
</html>