Skip to content

Commit 3b86078

Browse files
Pankaj RawatPankaj Rawat
authored andcommitted
added svg loader
1 parent e183b81 commit 3b86078

File tree

1 file changed

+41
-1
lines changed

1 file changed

+41
-1
lines changed

src/index.html

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,47 @@
99
<link rel="icon" type="image/x-icon" href="favicon.ico">
1010
</head>
1111
<body>
12-
<pin-root>Loading...</pin-root>
12+
<pin-root>
13+
<svg
14+
style="
15+
position: absolute;
16+
transform: translate(-2vw, 15vh);
17+
margin: 0 auto;
18+
top: 25vh;
19+
left: 42vw;"
20+
width='20vw'
21+
height='20vh'
22+
xmlns="http://www.w3.org/2000/svg"
23+
viewBox="0 0 100 100"
24+
preserveAspectRatio="xMidYMid"
25+
class="uil-balls">
26+
<rect x="0" y="0" width="100" height="100" fill="none" class="bk"></rect>
27+
<g transform="rotate(0 50 50)">
28+
<circle r="5" cx="30" cy="50">
29+
<animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
30+
<animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#f29c98;#f5b697"/>
31+
</circle>
32+
</g>
33+
<g transform="rotate(90 50 50)">
34+
<circle r="5" cx="30" cy="50">
35+
<animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
36+
<animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#f5b697;#f5e797"/>
37+
</circle>
38+
</g>
39+
<g transform="rotate(180 50 50)">
40+
<circle r="5" cx="30" cy="50">
41+
<animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
42+
<animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#f5e797;#a2e4f5"/>
43+
</circle>
44+
</g>
45+
<g transform="rotate(270 50 50)">
46+
<circle r="5" cx="30" cy="50">
47+
<animateTransform attributeName="transform" type="translate" begin="0s" repeatCount="indefinite" dur="1s" values="0 0;19.999999999999996 -20" keyTimes="0;1"/>
48+
<animate attributeName="fill" dur="1s" begin="0s" repeatCount="indefinite" keyTimes="0;1" values="#a2e4f5;#f29c98"/>
49+
</circle>
50+
</g>
51+
</svg>
52+
</pin-root>
1353
</body>
1454
<script type="text/javascript">
1555
$(document).foundation();

0 commit comments

Comments
 (0)