-
Notifications
You must be signed in to change notification settings - Fork 246
/
progressbar.html
69 lines (54 loc) · 1.63 KB
/
progressbar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>IK Library: Progress Bar</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="assets/ik_lib.css" rel="stylesheet" type="text/css">
<script src="assets/ik_utils.js"></script>
<script src="assets/ik_progressbar.js"></script>
<script>
var $pb, timer;
$(document).ready(function() {
$pb = $("#pb").ik_progressbar({'max' : 1500});
});
function runTest(e) {
var $elem, plugin;
$elem = $pb.attr({
'tabindex': 0
}).focus();
plugin = $elem.data("ik_progressbar");
plugin.reset();
window.timer = window.setInterval(updateProgress, 100, plugin);
$(e.currentTarget).prop({ "disabled": true });
}
function updateProgress(plugin) {
var val, lbl;
val = plugin.getValue();
if(val < plugin.options.max) {
lbl = 'Loading... ' + val + 'kb (' + plugin.getPercent() + '%)';
plugin.setValue(val + 10);
} else {
window.clearInterval(timer);
lbl = 'Loading complete!';
$("#btnTest").prop({ "disabled": false }).focus();
}
$('#pb_lbl').text(lbl);
}
</script>
</head>
<body>
<main>
<a href="index.html">← Index</a>
<h1>Progress Bar</h1>
<p>
<div id="pb_lbl">Click on <strong>Run Demo</strong> to simulate download.</div>
</p>
<p>
<div id="pb"></div>
</p>
<button id="btnTest" onclick="runTest(event);">Run Demo</button>
</main>
</body>
</html>