abstreet/widgetry_demo/index.html
Michael Kirk b1f4ca0b1b
loading screen (#373)
fancy loading screen
2020-10-29 18:39:51 -07:00

36 lines
2.7 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<style>
/*!
* Load Awesome v1.1.0 (http://github.danielcardoso.net/load-awesome/)
* Copyright 2015 Daniel Cardoso <@DanielCardoso>
* Licensed under MIT
*/
.la-ball-beat,.la-ball-beat>div{position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.la-ball-beat{display:block;font-size:0;color:#fff}.la-ball-beat.la-dark{color:#333}.la-ball-beat>div{display:inline-block;float:none;background-color:currentColor;border:0 solid currentColor}.la-ball-beat{width:54px;height:18px}.la-ball-beat>div{width:10px;height:10px;margin:4px;border-radius:100%;-webkit-animation:ball-beat 0.7s -0.15s infinite linear;-moz-animation:ball-beat 0.7s -0.15s infinite linear;-o-animation:ball-beat 0.7s -0.15s infinite linear;animation:ball-beat 0.7s -0.15s infinite linear}.la-ball-beat>div:nth-child(2n-1){-webkit-animation-delay:-.5s;-moz-animation-delay:-.5s;-o-animation-delay:-.5s;animation-delay:-.5s}.la-ball-beat.la-sm{width:26px;height:8px}.la-ball-beat.la-sm>div{width:4px;height:4px;margin:2px}.la-ball-beat.la-2x{width:108px;height:36px}.la-ball-beat.la-2x>div{width:20px;height:20px;margin:8px}.la-ball-beat.la-3x{width:162px;height:54px}.la-ball-beat.la-3x>div{width:30px;height:30px;margin:12px}@-webkit-keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@-moz-keyframes ball-beat{50%{opacity:.2;-moz-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-moz-transform:scale(1);transform:scale(1)}}@-o-keyframes ball-beat{50%{opacity:.2;-o-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-o-transform:scale(1);transform:scale(1)}}@keyframes ball-beat{50%{opacity:.2;-webkit-transform:scale(0.75);-moz-transform:scale(0.75);-o-transform:scale(0.75);transform:scale(0.75)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)}}
</style>
<script type="module">
import { default as init } from './widgetry_demo.js';
async function run() {
await init('./widgetry_demo_bg.wasm');
}
run();
</script>
</head>
<body style="background-color:black;">
<div id="loading" style="padding-top: 40px; color: white; text-align: center; font-family: arial; font-size: 200%;">
<h1>Loading Widgetry Demo...</h1>
<div style="margin: auto" class="la-ball-beat la-2x">
<div></div>
<div></div>
<div></div>
</div>
<h2>this may take up to 30 seconds</h2>
<p>If you think something has broken, check your browser's developer console (Ctrl+Shift+I or similar)</p>
<p>(your browser must support WebGL and WebAssembly)</p>
</div>
</body>
<html>