-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsvg.html
73 lines (73 loc) · 2.82 KB
/
svg.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
<!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">
<title>svg</title>
<style>
:root {
--success-dashoffset: 252;
--failed-dashoffset: 252;
}
#success {
stroke-dashoffset: var(--success-dashoffset);
transition: all 2s;
}
#failed1 {
stroke-dashoffset: var(--failed-dashoffset);
transition: all 2s;
}
#failed2 {
stroke-dashoffset: var(--failed-dashoffset);
transition: all 2s 0.5s;
}
</style>
</head>
<body>
<svg
version="1.1"
baseProfile="full"
width="150"
height="100"
xmlns="http://www.w3.org/2000/svg"
>
<g stroke-width="7" fill="none">
<circle cx="75" cy="50" r="40" stroke="#409EFF" fill="#409EFF" stroke-dashoffset="0" stroke-dasharray="252 252">
<animate attributeType="CSS" attributeName="stroke-dashoffset" dur="3s" values="504;0" repeatCount="indefinite" id="outer-loading"/>
</circle>
<circle cx="75" cy="50" r="40" fill="white">
<animate attributeType="CSS" attributeName="r" dur="1s" values="40;33;40" repeatCount="indefinite" id="inner-loading"/>
</circle>
<polyline points="45 45, 70 70, 100 30" stroke-dashoffset="252" stroke-dasharray="252 252" id="success" stroke="white" />
<line x1="55" x2="95" y1="30" y2="70" stroke-dashoffset="252" stroke-dasharray="252 252" id="failed1" stroke="white" />
<line x1="95" x2="55" y1="30" y2="70" stroke-dashoffset="252" stroke-dasharray="252 252" id="failed2" stroke="white" />
</g>
</svg>
<button id="btn-f">click to failed</button>
<button id="btn-s">click to success</button>
<script>
const outerLoadingSvg = document.getElementById('outer-loading');
const innerLoadingSvg = document.getElementById('inner-loading');
const successSvg = document.getElementById('success');
const failed1Svg = document.getElementById('failed1');
const failed2Svg = document.getElementById('failed2');
const failedBtn = document.getElementById('btn-f');
const successBtn = document.getElementById('btn-s');
function handleBtnClick(type,color) {
outerLoadingSvg.setAttribute('dur','0s');
innerLoadingSvg.setAttribute('dur','0s');
outerLoadingSvg.targetElement.setAttribute('stroke',color);
innerLoadingSvg.targetElement.setAttribute('stroke',color);
innerLoadingSvg.targetElement.setAttribute('fill',color);
document.children[0].style.setProperty(`--${type}-dashoffset`,0);
}
failedBtn.onclick = function() {
handleBtnClick('failed','#F56C6C');
}
successBtn.onclick = function() {
handleBtnClick('success','#409EFF');
}
</script>
</body>
</html>