Apply the loading spinner from the plotter example to the memory game

slint-ui · Aug 12, 2021 · a0a3e6e · a0a3e6e
1 parent 7fef85b
commit a0a3e6e
Showing 1 changed file with 19 additions and 1 deletion.
diff --git a/examples/memory/index.html b/examples/memory/index.html
@@ -8,18 +8,36 @@
 
 <head>
     <meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
+    <style>
+        /* beautify ignore:start */
+        .spinner:before {
+            content: ''; box-sizing: border-box; position: absolute;
+            top: 50%; left: 50%; width: 100px; height: 100px;
+            margin-top: -10px; margin-left: -10px;
+            border-radius: 50%;  border: 2px solid transparent;
+            border-top-color: #07d; border-bottom-color: #07d;
+            animation: spinner 1s ease infinite;
+        }
+        @keyframes spinner { to { transform: rotate(360deg); } }
+        /* beautify ignore:end */
+    </style>
 </head>
 
 <body>
     <p>This is the SixtyFPS Memory Game compiled to WebAssembly.</p>
+    <div id="spinner" style="position: relative;">
+        <div class="spinner">Loading...</div>
+    </div>
     <canvas id="canvas"></canvas>
     <p>
         <a href="https://github.com/sixtyfpsui/sixtyfps/blob/master/examples/memory/main.rs">
             View Source Code on GitHub</a>
     </p>
     <script type="module">
         import init from "./pkg/memory.js";
-        init();
+        init().finally(() => {
+            document.getElementById("spinner").remove();
+        });
     </script>
 </body>