-
Notifications
You must be signed in to change notification settings - Fork 34
/
index.html
130 lines (113 loc) · 4.04 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
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<title>NumberProgressBar</title>
<link rel="stylesheet" type="text/css" href="src/normalize.css">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="number-pb.css">
<link href='http://fonts.googleapis.com/css?family=Quicksand' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h1>Number Progress Bar</h1>
<section id="basic">
<article>
<h4 class="title">Basic <span></span></h4>
<div class="number-pb">
<div class="number-pb-shown"></div>
<div class="number-pb-num">0</div>
</div>
</article>
</section>
<section id="percentage">
<article>
<h4 class="title">Percentage <span></span></h4>
<div class="number-pb">
<div class="number-pb-shown dream"></div>
<div class="number-pb-num">0%</div>
</div>
</article>
</section>
<section id="step">
<article>
<h4 class="title">Step <span></span></h4>
<div class="number-pb">
<div class="number-pb-shown sun"></div>
<div class="number-pb-num">0/0</div>
</div>
</article>
</section>
<p><a href="http://ming.today">Ming YIN</a></p>
<p><a href="https://github.com/daimajia/NumberProgressBar">This idea</a> was originally designed by <a href="http://daimajia.com">Daimajia</a> on Android.</p>
<p>
<iframe src="http://ghbtns.com/github-btn.html?user=kalasoo&repo=NumberProgressBar&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>
<iframe src="http://ghbtns.com/github-btn.html?user=kalasoo&repo=NumberProgressBar&type=fork&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="95" height="20"></iframe>
</p>
</div>
<a href="https://github.com/kalasoo/NumberProgressBar"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
<script src="src/jquery.min.js"></script>
<script src="src/jquery.velocity.min.js"></script>
<script src="number-pb.js"></script>
<script>
$(function() {
function randomPercentage() {
return Math.floor(Math.random() * 100);
}
function randomInterval() {
var min = Math.floor(Math.random() * 30);
var max = min + (Math.floor(Math.random() * 40) + 70);
return [min, max];
}
function randomStep () {
return Math.floor(Math.random() * 10) + 5;
}
// setup
var $basic = $('#basic');
var interval = randomInterval();
var reverse = Math.random() >= 0.5;
var basicBar = $basic.find('.number-pb').NumberProgressBar({
style: 'basic',
min: interval[0],
max: interval[1],
reverse: reverse
})
if (reverse) {
$basic.find('.title span').text('[Max: ' + interval[1] + ', Min: ' + interval[0] + '] - Reverse');
} else {
$basic.find('.title span').text('[Min: ' + interval[0] + ', Max: ' + interval[1] + ']');
}
var percentageBar = $('#percentage .number-pb').NumberProgressBar({
style: 'percentage'
})
var $step = $('#step');
var maxStep = randomStep()
var stepBar = $('#step .number-pb').NumberProgressBar({
style: 'step',
max: maxStep
})
$step.find('.title span').text('[Max step: ' + maxStep + ']');
// loop
var basicLoop = function() {
basicBar.reach(undefined, {
complete: percentageLoop
});
}
var percentageLoop = function() {
percentageBar.reach(undefined, {
complete: stepLoop
});
}
var stepLoop = function() {
stepBar.reach(undefined, {
complete: basicLoop
});
}
// start
basicLoop();
});
</script>
</body>
</html>