~whychw/electron-fg2.git

			@@ -14,152 +14,11 @@
			height: 200px;
			background: rgba(0, 0, 0, .4);
			border-radius: 50%;
			padding: 20px;
			overflow: hidden;
			}

			ul {
			position: absolute;
			margin: -20px 0 0;
			padding: 0;
			left: 50%;
			top: 50%;
			transform: rotate(45deg) translate(-50%, -50%);
			}

			li {
			list-style-type: none;
			position: absolute;
			top: 0px;
			left: 0px;
			width: 20px;
			height: 20px;
			background: #00f7f9;
			border-radius: 50%;
			}

			#a {
			animation: a 1s ease-in-out infinite;
			top: -40px;
			left: -40px;
			}

			#b {
			animation: b 1s ease-in-out infinite;
			top: -40px;
			left: 0px;
			}

			#c {
			animation: c 1s ease-in-out infinite;
			top: -40px;
			left: 40px;
			}

			#d {
			animation: d 1s ease-in-out infinite;
			top: 0px;
			left: -40px;
			}

			#e {
			animation: e 1s ease-in-out infinite;
			top: 0px;
			left: 0px;
			}

			#f {
			animation: f 1s ease-in-out infinite;
			top: 0px;
			left: 40px;
			}

			#g {
			animation: g 1s ease-in-out infinite;
			top: 40px;
			left: -40px;
			}

			#h {
			animation: h 1s ease-in-out infinite;
			top: 40px;
			left: 0px;
			}

			#i {
			animation: i 1s ease-in-out infinite;
			top: 40px;
			left: 40px;
			}

			@keyframes a {

			50%,
			100% {
			top: 0px;
			left: -40px;
			}
			}

			@keyframes b {

			50%,
			100% {
			top: -40px;
			left: -40px;
			}
			}

			@keyframes c {

			50%,
			100% {
			top: -40px;
			left: 0px;
			}
			}

			@keyframes d {

			50%,
			100% {
			top: 40px;
			left: -40px;
			}
			}

			@keyframes f {

			50%,
			100% {
			top: -40px;
			left: 40px;
			}
			}

			@keyframes g {

			50%,
			100% {
			top: 40px;
			left: 0px;
			}
			}

			@keyframes h {

			50%,
			100% {
			top: 40px;
			left: 40px;
			}
			}

			@keyframes i {

			50%,
			100% {
			top: 0px;
			left: 40px;
			}
			svg {

			}
			</style>

			@@ -169,24 +28,36 @@

			<body>
			<div class="main">
			<ul>
			<li id='a'></li>
			<li id='b'></li>
			<li id='c'></li>
			<li id='d'></li>
			<li id='e'></li>
			<li id='f'></li>
			<li id='g'></li>
			<li id='h'></li>
			<li id='i'></li>
			</ul>
			<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');
			// });
			api.receive('java-ready', () => {
			api.send('java-ready');
			});
			</script>

			</body>