gallant/sshuttle-gui
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add loading animation to web app

Browse source
This commit is contained in:
Emil Ernerfeldt 2021-12-28 21:29:15 +01:00
parent 4b9a355add
commit 59a5eb297b
1 changed files with 65 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
docs/index.html
View file

@ -14,9 +14,17 @@
}
body {
/* Background color for what is not covered by the egui canvas,
/* Light mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
background: #909090;
}
@media (prefers-color-scheme: dark) {
body {
/* Dark mode background color for what is not covered by the egui canvas,
or where the egui canvas is translucent. */
background: #404040;
}
}
/* Allow canvas to fill entire web page: */
@ -37,6 +45,49 @@
left: 50%;
transform: translate(-50%, 0%);
}
.loading {
margin-right: auto;
margin-left: auto;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 24px;
font-family: Ubuntu-Light, Helvetica, sans-serif;
}
/* ---------------------------------------------- */
/* Loading animation from https://loading.io/css/ */
.lds-dual-ring {
display: inline-block;
width: 24px;
height: 24px;
}
.lds-dual-ring:after {
content: " ";
display: block;
width: 24px;
height: 24px;
margin: 0px;
border-radius: 50%;
border: 3px solid #fff;
border-color: #fff transparent #fff transparent;
animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<link rel="manifest" href="./manifest.json">
<script>
@ -55,6 +106,10 @@
<body>
<!-- The WASM code will resize this canvas to cover the entire screen -->
<canvas id="the_canvas_id"></canvas>
<div class="loading" id="loading">
Loading…&nbsp;&nbsp;
<div class="lds-dual-ring"></div>
</div>
<script>
// The `--no-modules`-generated JS from `wasm-bindgen` attempts to use
@ -77,11 +132,17 @@
// Here we tell bindgen the path to the wasm file so it can start
// initialization and return to us a promise when it's done.
wasm_bindgen("./eframe_template_bg.wasm")
.then(on_wasm_loaded)["catch"](console.error);
.then(on_wasm_loaded)
.catch(console.error);
function on_wasm_loaded() {
// This call installs a bunch of callbacks and then returns.
console.log("loaded wasm, starting egui app…");
// This call installs a bunch of callbacks and then returns:
wasm_bindgen.start("the_canvas_id");
console.log("egui app started.");
document.getElementById("loading").remove();
}
</script>
</body>