-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
87 lines (71 loc) · 2.64 KB
/
demo.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<html>
<head>
<title>Jquery Simple ProgressBar Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/machinalis/jquery_simple_progressbar/master/jquery_simple_progressbar.js"></script>
<style>
#content {
padding-left: 50px;
font-family: verdana
}
#content pre, #content p {
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="content">
<h2>Jquery Simple ProgressBar Demo</h2>
<p>Code and docs <a href="https://github.com/machinalis/jquery_simple_progressbar">at github</a></p>
<div id="example1">75</div>
<pre>$('#simplest-bar').simple_progressbar(); // the value (75) was readed rom the div text</pre>
<script>
$('#example1').simple_progressbar();
</script>
<div id="example2"></div>
<pre>$('#example2').simple_progressbar({value: 25, showValue: true});</pre>
<script>
$('#example2').simple_progressbar({value: 25, showValue: true});
</script>
<div id="example3"></div>
<pre>$('#example3').simple_progressbar({value: 25, showValue: true, valueText: 'too low!'});</pre>
<script>
$('#example3').simple_progressbar({value: 25, showValue: true, valueText: 'too low!'});
</script>
<div id="example4"></div>
<pre>$('#example4').simple_progressbar({value: 115});</pre>
<script>
$('#example4').simple_progressbar({value: 115});
</script>
<div id="example5"></div>
<pre>
$('#example5').simple_progressbar({value: 80,
height: '5px',
internalPadding: '3px',
normalColor: '#0767BA',
backgroundColor: '#C5D7EB'});
</pre>
<script>
$('#example5').simple_progressbar({value: 80,
height: '5px',
internalPadding: '3px',
normalColor: '#0767BA',
backgroundColor: '#C5D7EB'});
</script>
<div id="example6">75</div>
<pre>
function updateExample6() {
$('#example6').simple_progressbar({value: parseInt(Math.random() * 100 + 20)});
setTimeout(updateExample6, 500);
};
setTimeout(updateExample6, 500);
</pre>
<script>
function updateExample6() {
$('#example6').simple_progressbar({value: parseInt(Math.random() * 100 + 20)});
setTimeout(updateExample6, 500);
};
setTimeout(updateExample6, 500);
</script>
</div>
</body>