html
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
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Codeflash - Sonar Loader</title>
</head>
<body>
<svg viewBox="0 0 100 100">
<!-- Expanding concentric pulse -->
<circle cx="50" cy="50" r="5" fill="#43A047">
<animate attributeName="r" values="5;45" dur="2s" repeatCount="indefinite"
keySplines="0.42 0 0.58 1" calcMode="spline" />
<animate attributeName="opacity" values="1;0" dur="2s" repeatCount="indefinite" />
</circle>
<!-- Central pulsing circle -->
<circle cx="50" cy="50" r="5" fill="#43A047">
<animate attributeName="r" values="5;7;5" dur="1s" repeatCount="indefinite" />
</circle>
<!-- Rotating arc with pulsing opacity -->
<path d="M50,50 L95,50 A45,45 0 0,1 81.82,81.82 Z" fill="rgba(200,200,200,0.4)">
<animateTransform attributeName="transform" type="rotate"
from="0 50 50" to="360 50 50" dur="4s" repeatCount="indefinite" />
<animate attributeName="opacity" values="0.15;0.05;0.15" keyTimes="0;0.5;1" dur="2s" repeatCount="indefinite" />
</path>
</svg>
<a href="https://play.google.com/store/apps/details?id=com.alonewolf.codeflash" class="bottom-link">Download App</a>
</body>
Enter to Rename, Shift+Enter to Preview
css
css
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
html, body {
margin: 0;
height: 100%;
background: #121212;
display: flex;
align-items: center;
justify-content: center;
}
svg {
width: 200px;
height: 200px;
}
.bottom-link {
position: fixed;
bottom: 0px;
right:0px;
background-color: #0080FF;
color: #DEDEDE;
padding: 10px 20px;
text-decoration: none;
border-radius: 2px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Exécuter