<!DOCTYPE html>
|
<html lang="en">
|
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
|
<style>
|
.main {
|
position: relative;
|
width: 200px;
|
height: 200px;
|
background: rgba(0, 0, 0, .4);
|
border-radius: 50%;
|
padding: 20px;
|
overflow: hidden;
|
}
|
svg {
|
|
}
|
</style>
|
|
|
|
</head>
|
|
<body>
|
<div class="main">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
fill="#090" style="animation:spinLoadingIcon 1s steps(12) infinite">
|
<style>@keyframes
|
spinLoadingIcon{to{transform:rotate(360deg)}}</style>
|
<defs>
|
<path id="myPath" d="M7 3 V1 s0,-1 1,-1 1,1 1,1 v2 s0,1 -1,1 -1,-1 -1,-1 z" />
|
</defs>
|
<g>
|
<use transform="rotate(0, 8, 8)" xlink:href="#myPath" opacity="1" />
|
<use transform="rotate(30, 8, 8)" xlink:href="#myPath" opacity="0.92" />
|
<use transform="rotate(60, 8, 8)" xlink:href="#myPath" opacity="0.84" />
|
<use transform="rotate(90, 8, 8)" xlink:href="#myPath" opacity="0.76" />
|
<use transform="rotate(120, 8, 8)" xlink:href="#myPath" opacity="0.68" />
|
<use transform="rotate(150, 8, 8)" xlink:href="#myPath" opacity="0.60" />
|
<use transform="rotate(180, 8, 8)" xlink:href="#myPath" opacity="0.52" />
|
<use transform="rotate(210, 8, 8)" xlink:href="#myPath" opacity="0.44" />
|
<use transform="rotate(240, 8, 8)" xlink:href="#myPath" opacity="0.36" />
|
<use transform="rotate(270, 8, 8)" xlink:href="#myPath" opacity="0.28" />
|
<use transform="rotate(300, 8, 8)" xlink:href="#myPath" opacity="0.20" />
|
<use transform="rotate(330, 8, 8)" xlink:href="#myPath" opacity="0.12" />
|
</g>
|
</svg>
|
</div>
|
|
<script>
|
// api.send('renderer-ready');
|
api.receive('java-ready', () => {
|
api.send('java-ready');
|
});
|
</script>
|
|
</body>
|
|
</html>
|
