-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
50 lines (50 loc) · 2.82 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello Carbon Vue3</title>
<style>
.loading-spinner {
animation: rotate 4.5s linear infinite;
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id="app">
<div style="display: grid; justify-content: space-around">
<h3>Loading...</h3>
</div>
<div class="loading-spinner">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
style="
margin: auto;
background: transparent;
display: block;
width: 25%;
"
viewBox="0 0 100 100"
preserveAspectRatio="xMidYMid"
>
<g transform="translate(50 50)">
<g>
<path
d="M29.895651857753492 -2.5 L46.89565185775349 -2.5 L46.89565185775349 2.5 L29.895651857753492 2.5 A30 30 0 0 1 22.907185109576073 19.371651203643335 L22.907185109576073 19.371651203643335 L34.92800038974738 31.392466483814644 L31.392466483814644 34.92800038974738 L19.371651203643335 22.907185109576073 A30 30 0 0 1 2.500000000000002 29.895651857753492 L2.500000000000002 29.895651857753492 L2.500000000000003 46.89565185775349 L-2.499999999999998 46.89565185775349 L-2.4999999999999987 29.895651857753492 A30 30 0 0 1 -19.371651203643335 22.907185109576076 L-19.371651203643335 22.907185109576076 L-31.39246648381464 34.92800038974739 L-34.928000389747375 31.39246648381465 L-22.90718510957607 19.37165120364334 A30 30 0 0 1 -29.895651857753492 2.500000000000004 L-29.895651857753492 2.500000000000004 L-46.89565185775349 2.500000000000006 L-46.89565185775349 -2.4999999999999942 L-29.895651857753496 -2.4999999999999964 A30 30 0 0 1 -22.907185109576076 -19.37165120364333 L-22.907185109576076 -19.37165120364333 L-34.92800038974739 -31.392466483814637 L-31.39246648381466 -34.92800038974737 L-19.371651203643346 -22.907185109576062 A30 30 0 0 1 -2.499999999999993 -29.895651857753496 L-2.499999999999993 -29.895651857753496 L-2.499999999999996 -46.89565185775349 L2.4999999999999782 -46.89565185775349 L2.4999999999999813 -29.895651857753496 A30 30 0 0 1 19.371651203643342 -22.90718510957607 L19.371651203643342 -22.90718510957607 L31.392466483814648 -34.92800038974738 L34.92800038974737 -31.39246648381466 L22.90718510957606 -19.37165120364335 A30 30 0 0 1 29.895651857753496 -2.4999999999999947 M0 -24A24 24 0 1 0 0 24 A24 24 0 1 0 0 -24"
fill="#8a3ffc"
></path>
</g>
</g>
</svg>
</div>
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>