-
Notifications
You must be signed in to change notification settings - Fork 0
/
progressbar.htm
139 lines (126 loc) · 4.48 KB
/
progressbar.htm
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
131
132
133
134
135
136
137
138
139
<!DOCTYPE html>
<html>
<head>
<title>Unicode progress bars</title>
<meta charset="utf-8">
<style>
noscript {
display: inline-block;
margin: 1em 0;
padding: 8px 14px;
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
border-radius: 4px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
body { margin: 0; padding: 0; display: inline-block; min-width: 100%; }
#container { padding: 0 10px; }
table { margin-top: 2em; border-spacing: 1em 0; }
tr { white-space: nowrap; }
#sans-serif { font-size: 14px; line-height: 18px; }
#sans-serif tr > :nth-child(1) { font-family: "Helvetica Neue" }
#sans-serif tr > :nth-child(2) { font-family: Arial }
#sans-serif tr > :nth-child(3) { font-family: sans-serif }
#serif { font-size: 22px; line-height: 28px; }
#serif tr > :nth-child(1) { font-family: Georgia }
#serif tr > :nth-child(2) { font-family: "Times New Roman" }
#serif tr > :nth-child(3) { font-family: serif }
input[type=number] { width: 3em; }
label { display: inline-block; margin-right: 1em; }
</style>
<script>
var bar_styles = [
'▁▂▃▄▅▆▇█',
'⣀⣄⣤⣦⣶⣷⣿',
'⣀⣄⣆⣇⣧⣷⣿',
'○◔◐◕⬤',
'□◱◧▣■',
'□◱▨▩■',
'□◱▥▦■',
'░▒▓█',
'░█',
'⬜⬛',
'▱▰',
'▭◼',
'▯▮',
'◯⬤',
'⚪⚫',
];
function repeat(s, i) {
var r = '';
for(var j=0; j<i; j++) r += s;
return r;
}
function make_bar(p, bar_style, min_size, max_size) {
var d, full, m, middle, r, rest, x,
min_delta = Number.POSITIVE_INFINITY,
full_symbol = bar_style[bar_style.length-1],
n = bar_style.length - 1;
if(p == 100) return {str: repeat(full_symbol, 10), delta: 0};
p = p / 100;
for(var i=max_size; i>=min_size; i--) {
x = p * i;
full = Math.floor(x);
rest = x - full;
middle = Math.floor(rest * n);
if(p != 0 && full == 0 && middle == 0) middle = 1;
d = Math.abs(p - (full+middle/n)/i) * 100;
if(d < min_delta) {
min_delta = d;
m = bar_style[middle];
if(full == i) m = '';
r = repeat(full_symbol, full) + m + repeat(bar_style[0], i-full-1);
}
}
return {str: r, delta: min_delta};
}
function generate() {
var r1 = document.getElementById('sans-serif-body'),
r2 = document.getElementById('serif-body'),
p = new Number(document.getElementById('percentage').value),
min_size = new Number(document.getElementById('min-size').value),
max_size = new Number(document.getElementById('max-size').value);
document.getElementById('sans-serif').style.display = 'table';
document.getElementById('serif').style.display = 'table';
r1.innerHTML = '';
r2.innerHTML = '';
var bars = [];
for(var i=0; i<bar_styles.length; i++) {
bars.push(make_bar(p, bar_styles[i], min_size, max_size));
}
bars.sort(function (a, b) { return a.delta - b.delta; });
for(var i=0; i<bars.length; i++) {
bar = '<td>'+bars[i].str+' '+p+'%</td>';
delta = '<td>'+bars[i].delta.toPrecision(2)+'%</td>';
row = '<tr>'+repeat(bar, 3)+delta+'</tr>'
r1.innerHTML += row;
r2.innerHTML += row;
}
}
</script>
</head>
<body>
<a href="https://github.com/Changaco/unicode-progress-bars">
<img src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png" alt="Fork me on GitHub" style="float: right; border: 0;">
</a>
<div id="container">
<noscript>This application requires JavaScript.</noscript>
<p>This program generates progress bars made of Unicode symbols.</p>
<form onsubmit="generate(); return false">
<label>Percentage: <input id="percentage" type="number" min="0" max="100" step="any"></label>
<label>Min size: <input id="min-size" type="number" min="1" value="7"></label>
<label>Max size: <input id="max-size" type="number" min="1" value="13"></label>
<input type="submit" value="Generate">
</form>
<table id="sans-serif" style="display: none">
<thead><tr><th>Helvetica Neue</th><th>Arial</th><th>sans-serif</th><th>Delta</th></tr></thead>
<tbody id="sans-serif-body"></tbody>
</table>
<table id="serif" style="display: none">
<thead><tr><th>Georgia</th><th>Times New Roman</th><th>serif</th><th>Delta</th></tr></thead>
<tbody id="serif-body"></tbody>
</table>
</div>
</body>
</html>