forked from nikitahl/svg-circle-progress-generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
93 lines (91 loc) · 4.53 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Generate pure SVG circle progress bar.">
<title>SVG circle progress generator</title>
<link rel="stylesheet" href="/style.css">
</head>
<body>
<header>
<h1>SVG circle progress generator</h1>
</header>
<main>
<div class="column">
<form id="controls">
<div class="field-group">
<label for="progressrange">Progress:</label>
<input id="progressrange" type="range" name="progress" value="79" min="0" max="100" oninput="progressnumber.value=value">
<input id="progressnumber" type="number" name="progress" value="79" min="0" max="100" oninput="progressrange.value=value">
</div>
<div class="field-group">
<label for="svgsizerange">SVG Size (px):</label>
<input id="svgsizerange" type="range" name="size" value="200" min="50" max="250" oninput="svgsizenumber.value=value">
<input id="svgsizenumber" type="number" name="size" value="200" min="50" max="250" oninput="svgsizerange.value=value">
</div>
<div class="field-group">
<label for="circlewidthrange">Cirlce width (px):</label>
<input id="circlewidthrange" type="range" name="circleWidth" value="15" min="1" max="50" oninput="circlewidthnumber.value=value">
<input id="circlewidthnumber" type="number" name="circleWidth" value="15" min="1" max="50" oninput="circlewidthrange.value=value">
</div>
<div class="field-group">
<label for="progresswidthrange">Progress width (px):</label>
<input id="progresswidthrange" type="range" name="progressWidth" value="15" min="1" max="50" oninput="progresswidthnumber.value=value">
<input id="progresswidthnumber" type="number" name="progressWidth" value="15" min="1" max="50" oninput="progresswidthrange.value=value">
</div>
<div class="field-group">
<label for="cirlce-color">Circle color:</label>
<input id="cirlce-color" type="color" name="circleColor" value="#e0e0e0">
</div>
<div class="field-group">
<label for="progress-color">Progress color:</label>
<input id="progress-color" type="color" name="progressColor" value="#76e5b1">
</div>
<div class="field-group">
<div style="margin-right: 10px;">Progress shape:</div>
<div style="margin-right: 10px;">
<label for="progress-shape-square">Square:</label>
<input id="progress-shape-square" type="radio" name="progressShape" value="butt">
</div>
<div style="margin-right: 10px;">
<label for="progress-shape-rounded">Rounded:</label>
<input id="progress-shape-rounded" type="radio" name="progressShape" value="round" checked>
</div>
</div>
<div class="field-group field-group--optional">
<label for="value-toggle">Show value:</label>
<input id="value-toggle" type="checkbox" name="valueToggle" checked>
<br><br>
<div class="field-group field-group--optional">
<div class="field-group">
<label for="text-color">Text color:</label>
<input id="text-color" type="color" name="textColor" value="#6bdba7">
</div>
<div class="field-group">
<label for="textsize">Text size (px):</label>
<input id="textsizerange" type="range" name="textSize" value="52" min="1" max="100" oninput="textsizenumber.value=value">
<input id="textsizenumber" type="number" name="textSize" value="52" min="1" max="100" oninput="textsizerange.value=value">
</div>
<div class="field-group">
<label for="percentage-toggle">Show percentage:</label>
<input id="percentage-toggle" type="checkbox" name="percentageToggle">
</div>
</div>
</div>
</form>
</div>
<div class="column">
<div class="output" id="output"></div>
<strong>Code:</strong>
<pre id="output-code" class="output-code"></pre>
<button class="copy-btn" id="copy">Copy to clipboard</button>
</div>
</main>
<footer>
<p class="footer-text">Made by <a href="https://twitter.com/nikita_hlopov">@nikitahl</a> | View on <a href="https://github.com/nikitahl/svg-circle-progress-generator">GitHub</a></p>
</footer>
<script src="/script.js"></script>
</body>
</html>