Semicircle-progress-bar/index.html at master · dream-wlmcode/Semicircle-progress-bar · GitHub

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
 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width;initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<script src="js/RoundProgress.js"></script>
<title>demo</title>

<body>
<a style="display:inline-block; position:relative;"id="btn" href="###">reload</a>
<div style="width:100px; height:100px; position:relative;">
    <div class="progress_1 round_progress" data_progress='30' data_rotate="0.25"></div>
</div>
<div style="width:160px; height:160px; position:relative;">
    <div class="progress_2 round_progress" data_progress='60' data_rotate="0.5"></div>
</div>
<div style="width:120px; height:120px; position:relative;">
    <div class="progress_3 round_progress" data_progress='90' data_rotate="0.2"></div>
</div>
<div style="width:150px; height:150px; position:relative;">
    <div class="progress_4 round_progress" data_progress='120' data_rotate="0"></div>
</div>
<script>
    var roundProgress_1=new roundProgress(id='progress_1',line_width=5,line_color='#900',line_speed=10,back_color='#f5f5f5',speed=10,step=3,font_color='#007DCC',font_size=16);
    var roundProgress_1=new roundProgress('progress_2',10,'#007DCC',10,'#ccc',10,3,'#007DCC',20);
    var roundProgress_1=new roundProgress('progress_3',8,'#007DCC',10,'#ccc',10,3,'#007DCC',22);
    var roundProgress_1=new roundProgress('progress_4',6,'#007DCC',10,'#ccc',10,3,'#007DCC',18);
</script>


<script>
	document.getElementById('btn').onclick=function(){
		location.reload();
	}
</script>

</body>

</html>