diff --git a/src/components/animation/lodingSpin.vue b/src/components/animation/lodingSpin.vue
index f2449e2..776d2af 100644
--- a/src/components/animation/lodingSpin.vue
+++ b/src/components/animation/lodingSpin.vue
@@ -1,12 +1,22 @@
 <template>
-  <div class="loader">
+  <div class="spin">
+		<div class="loader">
     <div class="outer" />
     <div class="middle" />
     <div class="inner" />
   </div>
+	</div>
 </template>
 
 <style scoped>
+.spin{
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 20em;
+	height: 20em;
+	transform: scale(5);
+}
 .loader {
   position: relative;
 }
diff --git a/src/views/chat/index.vue b/src/views/chat/index.vue
index e1600ea..9807a16 100644
--- a/src/views/chat/index.vue
+++ b/src/views/chat/index.vue
@@ -26,6 +26,7 @@ import recording from "@/components/animation/recording.vue"
 import inputing from "@/components/animation/inputing.vue"
 import loding from "@/components/animation/loding.vue"
 import lodingCir from "@/components/animation/lodingCir.vue"
+import lodingSpin from "@/components/animation/lodingSpin.vue"
 
 import IatRecorder from '@/utils/test.js'
 // import IatRecorder from '@/utils/larRcorder.js'
@@ -613,7 +614,8 @@ window.addEventListener('test', (e) => {
 			<transition mode="out-in" name="fade">
 				<inputing v-if="nowStatus=='input'" key="input"></inputing>
 				<recording v-else-if="nowStatus=='record'" key="record"></recording>
-				<loding v-else-if="nowStatus=='loding'" key="loding"></loding>
+				<!-- <loding v-else-if="nowStatus=='loding'" key="loding"></loding> -->
+				<lodingSpin v-else-if="nowStatus=='loding'" key="loding"></lodingSpin>
 				<!-- <lodingCir v-else-if="nowStatus=='loding'" key="loding"></lodingCir> -->
 			</transition>
 		</indexBG>