-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
49 lines (45 loc) · 1.83 KB
/
index.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
<html>
<head>
<meta charset="UTF-8">
<script src="js/libs/jquery-1.8.3.min.js"></script>
<script src="js/build/jmyloader-full.min.js"></script>
<script>
$(function(){
function increment(elt, interval, i) {
elt.jMyLoader('increment-loaded-item');
setTimeout(function() {
increment(elt, interval, i);
},
interval);
}
var jml = $('body').jMyLoader();
jml.addItems(20);
increment($('body'), 500);
$('.demo2').jMyLoader({size : 200, spinner: 'image'});
$('.demo2').jMyLoader('add-items', 10);
increment($('.demo2'), 500);
$('.demo3').jMyLoader({size : 200, theme: 'blue'});
$('.demo3').jMyLoader('add-items', 10);
increment($('.demo3'), 500);
});
</script>
<link type="text/css" rel="stylesheet" href="css/jmyloader.css" media="all" />
<link type="text/css" rel="stylesheet" href="css/demo.css" media="all" />
</head>
<body>
<div class="demo-wrapper">
<div class="demo1">
<h1>Global loader</h1>
<p>A demo of a global loader is visible at the top right of the screen. This loader is set on the body element, and can be used by any element of the page.</p>
</div>
<div class="demo-container demo2">
<h1>Inside a container</h1>
<p>This loader is set to be shown inside this container. This is very practical for small portions of page that require a separate loading system.</p>
</div>
<div class="demo-container demo3">
<h1>With Blue theme</h1>
<p>This loader is using a different theme : blue. It is easy to implement your own themes from a custom css file.</p>
</div>
</div>
</body>
</html>