diff --git a/src/main/index.ts b/src/main/index.ts
index 275e103..8522598 100644
--- a/src/main/index.ts
+++ b/src/main/index.ts
@@ -8,7 +8,7 @@ import dotenv from 'dotenv'
 
 dotenv.config({ path: join(__dirname, '../../.env') })
 
-let win = null
+let win: BrowserWindow
 
 function createWin() {
   // 创建浏览器窗口
@@ -17,6 +17,7 @@ function createWin() {
     height: 768,
     webPreferences: {
       nodeIntegration: true,
+      preload: join(__dirname, '../preload/index.js'),
     },
   })
 
@@ -24,7 +25,7 @@ function createWin() {
     ? `http://localhost:${process.env.PORT}` // vite 启动的服务器地址
     : `file://${join(__dirname, '../render/index.html')}` // vite 构建后的静态文件地址
 
-  win.loadURL(URL)
+  win?.loadURL(URL)
 }
 
 app.whenReady().then(createWin)
diff --git a/src/main/preload.js b/src/main/preload.js
deleted file mode 100644
index 601ee49..0000000
--- a/src/main/preload.js
+++ /dev/null
@@ -1,5 +0,0 @@
-const { ipcRenderer } = require('electron')
-
-window.stopLoading = function() {
-  ipcRenderer.send('stop-loading-main')
-}
diff --git a/src/preload/index.js b/src/preload/index.js
new file mode 100644
index 0000000..04aecee
--- /dev/null
+++ b/src/preload/index.js
@@ -0,0 +1,128 @@
+
+/** docoment 加载完成 */
+function domReady(...args) {
+  const condition = args.length ? [...args] : ['complete', 'interactive']
+  return new Promise(resolve => {
+    if (condition.includes(document.readyState)) {
+      resolve(true)
+    } else {
+      document.addEventListener('readystatechange', () => {
+        if (condition.includes(document.readyState)) {
+          resolve(true)
+        }
+      })
+    }
+  })
+}
+
+/** 插入 loading */
+function insertLoading() {
+  const loadingStyle = document.createElement('style');
+  const loadingBox = document.createElement('div');
+
+  loadingStyle.textContent += `
+  /* https://projects.lukehaas.me/css-loaders/ */
+  .loading-box { height: 100vh; width: 100vw; position: fixed; left: 0; top: 0; display: flex; align-items: center; background-color: #242424; z-index: 9; }
+
+  .load1 .loader,
+  .load1 .loader:before,
+  .load1 .loader:after {
+    background: #ffffff;
+    -webkit-animation: load1 1s infinite ease-in-out;
+    animation: load1 1s infinite ease-in-out;
+    width: 1em;
+    height: 4em;
+  }
+
+  .load1 .loader {
+    color: #ffffff;
+    text-indent: -9999em;
+    margin: 88px auto;
+    position: relative;
+    font-size: 11px;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation-delay: -0.16s;
+    animation-delay: -0.16s;
+  }
+
+  .load1 .loader:before,
+  .load1 .loader:after {
+    position: absolute;
+    top: 0;
+    content: '';
+  }
+
+  .load1 .loader:before {
+    left: -1.5em;
+    -webkit-animation-delay: -0.32s;
+    animation-delay: -0.32s;
+  }
+
+  .load1 .loader:after {
+    left: 1.5em;
+  }
+
+  @-webkit-keyframes load1 {
+
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 0;
+      height: 4em;
+    }
+
+    40% {
+      box-shadow: 0 -2em;
+      height: 5em;
+    }
+  }
+
+  @keyframes load1 {
+
+    0%,
+    80%,
+    100% {
+      box-shadow: 0 0;
+      height: 4em;
+    }
+
+    40% {
+      box-shadow: 0 -2em;
+      height: 5em;
+    }
+  }`;
+
+  loadingBox.classList.add('loading-box', 'load1');
+  loadingBox.innerHTML += '<div class="loader"></div>';
+
+  const appendLoading = () => {
+    document.head.appendChild(loadingStyle);
+    document.body.appendChild(loadingBox);
+  };
+
+  const removeLoading = () => {
+    document.head.removeChild(loadingStyle);
+    document.body.removeChild(loadingBox);
+  };
+
+  return { loadingStyle, loadingBox, removeLoading, appendLoading }
+}
+
+; (async function () {
+  await domReady();
+
+  let _isCallClosePreloadLoading = false;
+  const { removeLoading, appendLoading } = insertLoading();
+
+  window.ClosePreloadLoading = () => {
+    _isCallClosePreloadLoading = true;
+    removeLoading();
+  };
+
+  // 5 秒超时自动关闭
+  setTimeout(() => !_isCallClosePreloadLoading && removeLoading(), 4999);
+
+  appendLoading();
+})();
diff --git a/src/preload/loading.html b/src/preload/loading.html
new file mode 100644
index 0000000..76665e3
--- /dev/null
+++ b/src/preload/loading.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>electron-vue3-vite</title>
+  <style>
+    /* https://projects.lukehaas.me/css-loaders/ */
+    body { margin: 0; background-color: #242424; }
+    .loading-box { height: 100vh; display: flex; align-items: center; }
+
+    .load1 .loader,
+    .load1 .loader:before,
+    .load1 .loader:after {
+      background: #ffffff;
+      -webkit-animation: load1 1s infinite ease-in-out;
+      animation: load1 1s infinite ease-in-out;
+      width: 1em;
+      height: 4em;
+    }
+
+    .load1 .loader {
+      color: #ffffff;
+      text-indent: -9999em;
+      margin: 88px auto;
+      position: relative;
+      font-size: 11px;
+      -webkit-transform: translateZ(0);
+      -ms-transform: translateZ(0);
+      transform: translateZ(0);
+      -webkit-animation-delay: -0.16s;
+      animation-delay: -0.16s;
+    }
+
+    .load1 .loader:before,
+    .load1 .loader:after {
+      position: absolute;
+      top: 0;
+      content: '';
+    }
+
+    .load1 .loader:before {
+      left: -1.5em;
+      -webkit-animation-delay: -0.32s;
+      animation-delay: -0.32s;
+    }
+
+    .load1 .loader:after {
+      left: 1.5em;
+    }
+
+    @-webkit-keyframes load1 {
+
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 0;
+        height: 4em;
+      }
+
+      40% {
+        box-shadow: 0 -2em;
+        height: 5em;
+      }
+    }
+
+    @keyframes load1 {
+
+      0%,
+      80%,
+      100% {
+        box-shadow: 0 0;
+        height: 4em;
+      }
+
+      40% {
+        box-shadow: 0 -2em;
+        height: 5em;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="loading-box load1">
+    <div class="loader"></div>
+  </div>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/render/main.ts b/src/render/main.ts
index 02e5c23..daaba60 100644
--- a/src/render/main.ts
+++ b/src/render/main.ts
@@ -10,4 +10,4 @@ console.log('ipcRenderer:', ipcRenderer)
 console.log('Store', store)
 console.log('electron is dev', isdev)
 
-createApp(App as any).mount('#app')
+createApp(App as any).mount('#app').$nextTick(window.ClosePreloadLoading)
diff --git a/src/render/shims.d.ts b/src/render/shims.d.ts
index d9f24fa..467e9e6 100644
--- a/src/render/shims.d.ts
+++ b/src/render/shims.d.ts
@@ -2,3 +2,8 @@ declare module '*.vue' {
   import Vue from 'vue'
   export default Vue
 }
+
+interface Window {
+  /** 关闭预加载动画 */
+ ClosePreloadLoading: () => void
+}