-
Notifications
You must be signed in to change notification settings - Fork 1
/
load.html
44 lines (44 loc) · 1.76 KB
/
load.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Thulium Music Loading</title>
<style>
body {
margin: 0;
padding: 0;
background-color: transparent;
align-content: center;
}
svg.logo {
align-content: center;
width: 400px;
}
</style>
</head>
<body>
<div>
<svg class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 700">
<path id="logo-cloud" d="M840,304c91.3,18.5,160,99.2,160,196c0,110.4-89.5,200-200.1,200
h-575C100.6,700,0,599.4,0,475.1C0,377,62.8,293.6,150.3,262.8c-0.2-4.1-0.3-8.4-0.3-12.7
C150,112,262,0,400,0c92.6,0,173.5,50.4,216.6,125.2c23.8-16,52.5-25.3,83.3-25.3
c82.8,0,150,67.2,150,150C849.9,269.1,846.4,287.3,840,304L840,304z">
<animate
attributeName="fill" values="#00A0E9; #00C0C9; #00A0E9"
dur="2s" repeatCount="indefinite"/>
</path>
<g>
<path id="logo-note" fill="#FFFFFF" transform="scale(0.8), translate(130 95)"
d="M569.9,178.6c0,0-3.4-4-12.7-10.2c-29.1-19.6-65.2-29.4-99.5-32.3c-10.4-0.9-23.6-1.5-34.1-1.6
c-25.5-0.4-54.2,3.1-77.6,14.6l146.7,317.4c-22.9-12.4-52.8-18.5-84.7-15.5c-66.4,6.4-116.6,50.1-112,97.6
c4.6,47.5,62.1,80.9,128.6,74.5c66.4-6.4,116.6-50.1,112-97.6c-0.5-5.5-1.8-10.9-3.7-16h0L423.5,163.8
c6.2-2.8,35.9-4.4,53-4.1c23.2,0.4,60,7.9,70.3,10.9C556.5,173.4,569.9,178.6,569.9,178.6z"/>
<animateTransform
attributeName="transform" type="translate" values="0 -24; 0 24; 0 -24"
keyTimes="0; 0.5; 1" calcMode="spline" keySplines=".4 0 .4 1; .4 0 .4 1"
dur="2s" repeatCount="indefinite"/>
</g>
</svg>
</div>
</body>
</html>