loading circle for web

NexusSocial · Oct 2, 2024 · c6bc314 · c6bc314
1 parent 1d7122a
commit c6bc314
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 18 deletions.
diff --git a/build/web/styles.css b/build/web/styles.css
@@ -1,22 +1,53 @@
-#bevy {
-    z-index: 2;
+body, html {
+    height: 100%;
 }
-audio{
-    display:none;
+
+body {
+    background-color: lightgray;
+    margin: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
-canvas {
+
+.game-container {
     width: 100% !important;
     height: 100% !important;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
-html {
-    height: 100%;
-    background-color: black;
-    margin: 0;
-    overflow: hidden;
+
+.lds-dual-ring {
+    display: inline-block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: auto;
+    width: 80px;
+    height: 80px;
 }
 
-body {
-    height: 100%;
-    background-color: black;
-    margin: 0;
+.lds-dual-ring:after {
+    content: " ";
+    display: block;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    border: 6px 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);
+    }
+}
+
+#bevy {
+    z-index: 2;
+}
diff --git a/index.html b/index.html
@@ -11,5 +11,11 @@
 <body>
 <div id="audio" controls></div>
 <link data-trunk rel="inline" href="build/web/sound.js"/>
+<div class="game-container">
+    <div class="lds-dual-ring"></div>
+    <canvas id="bevy">
+        Javascript and support for canvas is required
+    </canvas>
+</div>
 </body>
 </html>
diff --git a/src/main.rs b/src/main.rs
@@ -43,10 +43,23 @@ pub fn main() {
 			EmbeddedAssetPlugin::default(),
 			bevy_web_file_drop::WebFileDropPlugin,
 			/*bevy_mod_openxr::add_xr_plugins(*/
-			DefaultPlugins.set(AssetPlugin {
-				meta_check: AssetMetaCheck::Never,
-				..AssetPlugin::default()
-			}), /*)*/
+			DefaultPlugins
+				.set(WindowPlugin {
+					primary_window: Some(Window {
+						title: "Bevy game".to_string(), // ToDo
+						// Bind to canvas included in `index.html`
+						canvas: Some("#bevy".to_owned()),
+						fit_canvas_to_parent: true,
+						// Tells wasm not to override default event handling, like F5 and Ctrl+R
+						prevent_default_event_handling: false,
+						..default()
+					}),
+					..default()
+				})
+				.set(AssetPlugin {
+					meta_check: AssetMetaCheck::Never,
+					..AssetPlugin::default()
+				}), /*)*/
 			//bevy_xr_utils::xr_utils_actions::XRUtilsActionsPlugin,
 			PhysicsPlugins::default(),
 			VrControllerPlugin,