Add basic splash screen

2024-12-08 21:24:42 +01:00 · 2024-12-08 21:24:42 +01:00 · 8b29c3a663
parent c0d0d8563b
commit 8b29c3a663
2 changed files with 84 additions and 0 deletions
--- a/src/main/index.ts
+++ b/src/main/index.ts
@ -4,6 +4,7 @@ import { electronApp, optimizer, is } from '@electron-toolkit/utils'
 import icon from '../../resources/icon.png?asset'

 let mainWindow: BrowserWindow;
+let splash: BrowserWindow;
 let tray: Tray;

 function createWindow(): void {
@ -20,8 +21,21 @@ function createWindow(): void {
    }
  })

+  // TODO Create splash screen
+  splash = new BrowserWindow({
+    width: 500, 
+    height: 300, 
+    transparent: true, 
+    frame: false, 
+    alwaysOnTop: true 
+  });
+  splash.loadFile('src/renderer/splash.html');
+  splash.center();
+  splash.show();
+
  // TODO show window according to the app settings
  mainWindow.on('ready-to-show', () => {
+    splash.close();
    mainWindow.show()
  })

--- a/src/renderer/splash.html
+++ b/src/renderer/splash.html
@ -0,0 +1,70 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Splash</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />
+  </head>
+
+  <body>
+    <h3>Application Is Starting...</h3>
+    <div class="loader"></div>
+
+    <style>
+        body {
+            background-color: #f9f9fa;
+        }
+        .flex {
+            -webkit-box-flex: 1;
+            -ms-flex: 1 1 auto;
+            flex: 1 1 auto
+        }
+        .loader {
+            border: 5px solid rgba(18, 65, 145, 255);
+            border-radius: 50%;
+            border-top: 5px solid #ffffff;
+            width: 40px;
+            height: 40px;
+            -webkit-animation: spin 1s linear infinite;
+            /* Safari */
+            animation: spin 1s linear infinite;
+            margin: auto;
+            left: 0;
+            right: 0;
+            top: 0px;
+            bottom: 0;
+            position: fixed;
+        }
+
+        /* Safari */
+        @-webkit-keyframes spin {
+            0% {
+                -webkit-transform: rotate(0deg);
+            }
+
+            100% {
+                -webkit-transform: rotate(360deg);
+            }
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+
+        .center {
+            border: none !important;
+            text-align: center;
+        }
+    </style>
+  </body>
+</html>