-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathSkype-loading.html
57 lines (51 loc) · 2.27 KB
/
Skype-loading.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>模仿Skype loading</title>
</head>
<body>
<style>
body{
background: #02aff1;
text-align: center;
}
svg{
display: block;
margin: 30px auto;
}
</style>
<img width="150" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/40480/skype-logo.png" alt="">
<svg width="150" height="150" xmlns="http://www.w3.org/2000/svg" transform="rotate(80)">
<path id="track" d="m10,60c0,-27.624309 22.375691,-50 50,-50c27.624309,0 50,22.375691 50,50c0,27.624309 -22.375691,50 -50,50c-27.624309,0 -50,-22.375691 -50,-50z" stroke="transparent" fill="none" />
<circle r="5" stroke="none" fill="white">
<animate attributeName="r" values="5;10;5" dur="1.7s" repeatCount="indefinite"></animate>
<animateMotion id="a1" dur="1.7s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.775 0.005 0.310 1.000">
<mpath xlink:href="#track"></mpath>
</animateMotion>
</circle>
<circle r="5" stroke="none" fill="white">
<animateMotion id="a2" begin="a1.begin+.05s" dur="1.7s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.775 0.005 0.310 1.000">
<mpath xlink:href="#track"></mpath>
</animateMotion>
</circle>
<circle r="5" stroke="none" fill="white">
<animateMotion id="a3" begin="a2.begin+.09s" dur="1.7s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.775 0.005 0.310 1.000">
<mpath xlink:href="#track"></mpath>
</animateMotion>
</circle>
<circle r="5" stroke="none" fill="white">
<animateMotion id="a4" begin="a3.begin+.13s" dur="1.7s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.775 0.005 0.310 1.000">
<mpath xlink:href="#track"></mpath>
</animateMotion>
</circle>
<circle r="5" stroke="none" fill="white">
<animateMotion id="a5" begin="a4.begin+.17s" dur="1.7s" repeatCount="indefinite" calcMode="spline" keyTimes="0;1" keySplines="0.775 0.005 0.310 1.000">
<mpath xlink:href="#track"></mpath>
</animateMotion>
</circle>
</svg>
<!-- 参考链接：https://codepen.io/robbue/pen/yfEpu -->
</body>
</html>