diff --git a/src/components/main/t-shareBtn.vue b/src/components/main/t-shareBtn.vue
index d6d7f414..05fe985b 100644
--- a/src/components/main/t-shareBtn.vue
+++ b/src/components/main/t-shareBtn.vue
@@ -1,4 +1,5 @@
 <template>
+  <ToLoading v-model="loading" title="正在生成分享图片" :subtitle="`${props.title}.png`" />
   <div class="share-box">
     <div class="share-btn" @click="shareContent()">
       <v-icon style="color: var(--theme-switch-icon)"> mdi-share-variant </v-icon>
@@ -6,9 +7,15 @@
   </div>
 </template>
 <script lang="ts" setup>
+// vue
+import { ref, onMounted } from "vue";
+import ToLoading from "../overlay/to-loading.vue";
 // utils
 import { generateShareImg } from "../../utils/TGShare";
 
+// loading
+const loading = ref<boolean>();
+
 interface TShareBtnProps {
   modelValue: HTMLElement;
   title: string;
@@ -16,8 +23,12 @@ interface TShareBtnProps {
 
 const props = defineProps<TShareBtnProps>();
 
+onMounted(() => (loading.value = false));
+
 async function shareContent() {
+  loading.value = true;
   await generateShareImg(props.title, props.modelValue);
+  loading.value = false;
 }
 </script>
 <style lang="css" scoped>