diff --git a/src/assets/icon/Azizi/loading.webp b/src/assets/icon/Azizi/loading.webp
new file mode 100644
index 0000000..27e09f2
Binary files /dev/null and b/src/assets/icon/Azizi/loading.webp differ
diff --git a/src/components/LoadingSpinner.vue b/src/components/LoadingSpinner.vue
new file mode 100644
index 0000000..ec02438
--- /dev/null
+++ b/src/components/LoadingSpinner.vue
@@ -0,0 +1,30 @@
+<template>
+  <img
+    :src="loadingImg"
+    alt=""
+    class="loading-spinner-image"
+    :style="{ width: size, height: size, margin }"
+  />
+</template>
+
+<script setup>
+import loadingImg from '@/assets/icon/Azizi/loading.webp'
+
+defineProps({
+  size: {
+    type: String,
+    default: '32px',
+  },
+  margin: {
+    type: String,
+    default: '0 auto 12px',
+  },
+})
+</script>
+
+<style scoped>
+.loading-spinner-image {
+  display: block;
+  object-fit: contain;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index 7784028..63b2eee 100644
--- a/src/main.js
+++ b/src/main.js
@@ -12,6 +12,7 @@ import { useLangStore } from '@/stores/lang'
 import i18n, { initI18n, setLocale } from './locales/i18n'
 
 import App from './App.vue'
+import LoadingSpinner from './components/LoadingSpinner.vue'
 import router from './router'
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
@@ -32,6 +33,7 @@ const app = createApp(App)
 
 // 注册智能图片指令
 app.directive('smart-img', smartImage)
+app.component('LoadingSpinner', LoadingSpinner)
 
 app.use(router)
 app.use(pinia)