diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index b7afc60..6e77dc1 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -1,82 +1,31 @@
 <template>
   <div
     v-if="visible"
-    class="loading-container"
+    class="loading-overlay"
     :class="{
-      'loading-container-fullscreen': fullscreen,
-      'loading-container-inline': !fullscreen
+      'loading-overlay-fullscreen': fullscreen,
+      'loading-overlay-inline': !fullscreen
     }"
     :style="containerStyle"
   >
-    <div class="loading-card" :class="{ 'loading-card-inline': !fullscreen }">
-      <span class="loading-ambient loading-ambient-primary"></span>
-      <span class="loading-ambient loading-ambient-secondary"></span>
-
-      <div class="loading-spinner-wrapper" :style="spinnerWrapperStyle">
-        <!-- 旋转圆环样式 -->
-        <div v-if="type === 'spinner'" class="loading-spinner" :style="spinnerStyle">
-          <svg class="loading-svg" viewBox="0 0 50 50" :style="svgStyle">
-            <circle
-              class="loading-path"
-              cx="25"
-              cy="25"
-              r="20"
-              fill="none"
-              stroke="currentColor"
-              :stroke-width="strokeWidth"
-              :stroke-linecap="strokeLinecap"
-              stroke-dasharray="94.2 94.2"
-              stroke-dashoffset="94.2"
-            ></circle>
-          </svg>
-        </div>
-
-        <!-- 点状加载样式 -->
-        <div v-else-if="type === 'dots'" class="loading-dots" :style="dotsContainerStyle">
-          <div
-            v-for="n in 3"
-            :key="n"
-            class="loading-dot"
-            :style="[
-              dotStyle,
-              {
-                animationDelay: `${n * 0.2}s`
-              }
-            ]"
-          ></div>
-        </div>
-
-        <!-- 脉冲样式 -->
-        <div v-else-if="type === 'pulse'" class="loading-pulse" :style="pulseStyle"></div>
-
-        <!-- 环形样式 -->
-        <div v-else-if="type === 'ring'" class="loading-ring" :style="ringStyle">
-          <div class="loading-ring-circle" :style="ringCircleStyle"></div>
-        </div>
-
-        <!-- 默认样式（旋转圆环） -->
-        <div v-else class="loading-spinner" :style="spinnerStyle">
-          <svg class="loading-svg" viewBox="0 0 50 50" :style="svgStyle">
-            <circle
-              class="loading-path"
-              cx="25"
-              cy="25"
-              r="20"
-              fill="none"
-              stroke="currentColor"
-              :stroke-width="strokeWidth"
-              :stroke-linecap="strokeLinecap"
-              stroke-dasharray="94.2 94.2"
-              stroke-dashoffset="94.2"
-            ></circle>
-          </svg>
-        </div>
-
-        <!-- 加载文本 -->
-        <div v-if="text" class="loading-text" :style="textStyle">
-          {{ text }}
-        </div>
+    <div class="loading-hud" :class="{ 'loading-hud-inline': !fullscreen }">
+      <div class="loading-spinner" :style="spinnerStyle">
+        <svg class="loading-svg" viewBox="0 0 50 50">
+          <circle
+            class="loading-path"
+            cx="25"
+            cy="25"
+            r="18"
+            fill="none"
+            stroke="currentColor"
+            :stroke-width="strokeWidth"
+            :stroke-linecap="strokeLinecap"
+            stroke-dasharray="85 120"
+            stroke-dashoffset="0"
+          ></circle>
+        </svg>
       </div>
+      <div v-if="text" class="loading-text" :style="textStyle">{{ text }}</div>
     </div>
   </div>
 </template>
@@ -117,36 +66,17 @@ const containerStyle = computed(() => {
   if (props.fullscreen) {
     style.background =
       props.background ||
-      'radial-gradient(circle at 20% 20%, rgba(255,247,249,0.95), rgba(255,236,240,0.72))'
+      'radial-gradient(circle at 20% 20%, rgba(255,247,249,0.75), rgba(255,236,240,0.72))'
     style.opacity = props.opacity ?? 1
   }
   return style
 })
 
-// 计算spinner包装器样式
-const spinnerWrapperStyle = computed(() => {
-  const color = props.color || '#E8424D'
-  return {
-    color,
-    '--loading-color': color
-  }
-})
-
-// 计算spinner样式
-const spinnerStyle = computed(() => {
-  return {
-    width: typeof props.size === 'number' ? `${props.size}px` : props.size || '40px',
-    height: typeof props.size === 'number' ? `${props.size}px` : props.size || '40px'
-  }
-})
-
-// 计算svg样式
-const svgStyle = computed(() => {
-  return {
-    animationDuration: '1.4s',
-    transformOrigin: 'center center'
-  }
-})
+const spinnerStyle = computed(() => ({
+  width: typeof props.size === 'number' ? `${props.size}px` : props.size || '44px',
+  height: typeof props.size === 'number' ? `${props.size}px` : props.size || '44px',
+  color: props.color || '#fff'
+}))
 
 // 计算线条宽度
 const strokeWidth = computed(() => {
@@ -158,230 +88,86 @@ const strokeLinecap = computed(() => {
   return props.strokeLinecap || 'round'
 })
 
-// 计算点状加载容器样式
-const dotsContainerStyle = computed(() => {
-  return {
-    gap: typeof props.size === 'number' ? `${props.size / 6}px` : '6px'
-  }
-})
-
-// 计算点状加载样式
-const dotStyle = computed(() => {
-  const dotSize = typeof props.size === 'number' ? props.size / 5 : 8
-  return {
-    width: `${dotSize}px`,
-    height: `${dotSize}px`,
-    backgroundColor: props.color || '#1890ff'
-  }
-})
-
-// 计算脉冲样式
-const pulseStyle = computed(() => {
-  const pulseSize = typeof props.size === 'number' ? props.size : 40
-  return {
-    width: `${pulseSize}px`,
-    height: `${pulseSize}px`,
-    backgroundColor: props.color || '#1890ff'
-  }
-})
-
-// 计算环形样式
-const ringStyle = computed(() => {
-  const ringSize = typeof props.size === 'number' ? props.size : 40
-  return {
-    width: `${ringSize}px`,
-    height: `${ringSize}px`
-  }
-})
-
-// 计算环形内部圆样式
-const ringCircleStyle = computed(() => {
-  const circleBorderWidth = props.strokeWidth || 3
-  return {
-    borderWidth: `${circleBorderWidth}px`,
-    borderColor: `${props.color || '#1890ff'} transparent ${props.color || '#1890ff'} transparent`
-  }
-})
-
 // 计算文本样式
 const textStyle = computed(() => {
   return {
-    marginTop: typeof props.size === 'number' ? `${props.size / 4}px` : '10px',
-    color: props.color || '#666'
+    marginTop: '12px',
+    color: '#fff'
   }
 })
 </script>
 
 <style scoped>
-.loading-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 16px;
-}
-
-/* 全屏容器样式 */
-.loading-container-fullscreen {
+.loading-overlay-fullscreen {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 9999;
-  background: radial-gradient(circle at 30% 20%, rgba(255, 247, 249, 0.95), rgba(255, 236, 240, 0.75));
-}
-
-/* 内联容器样式 */
-.loading-container-inline {
-  display: inline-flex;
-  padding: 8px;
-}
-
-.loading-card {
-  position: relative;
-  overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 18px 20px;
-  border-radius: 18px;
-  width: 260px;
-  max-width: min(72vw, 340px);
-  min-width: 220px;
-  aspect-ratio: 3 / 2;
-  background: linear-gradient(135deg, rgba(255, 247, 249, 0.95), rgba(255, 255, 255, 0.9));
-  border: 1px solid rgba(232, 66, 77, 0.12);
-  box-shadow: 0 18px 45px rgba(232, 66, 77, 0.16), 0 4px 12px rgba(232, 66, 77, 0.08);
 }
 
-.loading-card-inline {
-  min-width: auto;
-  padding: 10px 14px;
-  width: auto;
-  max-width: none;
-  aspect-ratio: auto;
-  box-shadow: 0 10px 26px rgba(232, 66, 77, 0.14);
-  border-radius: 14px;
-}
-
-.loading-ambient {
-  position: absolute;
-  border-radius: 50%;
-  filter: blur(28px);
-  opacity: 0.65;
-  animation: float 6s ease-in-out infinite alternate;
-}
-
-.loading-ambient-primary {
-  width: 160px;
-  height: 160px;
-  top: -40px;
-  right: -30px;
-  background: radial-gradient(circle, rgba(255, 184, 193, 0.55), rgba(255, 228, 234, 0.15));
-}
-
-.loading-ambient-secondary {
-  width: 140px;
-  height: 140px;
-  bottom: -50px;
-  left: -20px;
-  background: radial-gradient(circle, rgba(255, 221, 230, 0.6), rgba(255, 255, 255, 0.2));
-  animation-delay: 0.8s;
-}
-
-.loading-spinner-wrapper {
+.loading-overlay-inline {
   position: relative;
-  z-index: 1;
+  display: inline-flex;
+}
+
+.loading-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  inset: 0;
+  background: transparent;
+}
+
+.loading-hud {
+  min-width: 100px;
+  padding: 18px 22px;
+  border-radius: 14px;
+  background: rgba(0, 0, 0, 0.7);
   display: flex;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  gap: 12px;
-  color: var(--loading-color);
+  justify-content: center;
+  gap: 10px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
+  backdrop-filter: blur(6px);
+}
+
+.loading-hud-inline {
+  position: absolute;
+  top: 0;
+  left: 0;
 }
 
-/* 旋转圆环样式 */
 .loading-spinner {
   position: relative;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  filter: drop-shadow(0 8px 18px rgba(232, 66, 77, 0.18));
-}
-
-.loading-spinner::before {
-  content: '';
-  position: absolute;
-  inset: -20%;
-  border-radius: 50%;
-  background: radial-gradient(circle at 30% 30%, rgba(255, 184, 193, 0.35), rgba(255, 255, 255, 0));
-  animation: pulseGlow 2.4s ease-in-out infinite;
+  display: inline-flex;
 }
 
 .loading-svg {
-  animation: rotate 1.4s linear infinite;
+  animation: rotate 1s linear infinite;
   transform-origin: center center;
-  filter: drop-shadow(0 6px 14px rgba(232, 66, 77, 0.14));
-}
-
-/* 确保SVG中的circle元素也正确居中 */
-.loading-svg circle {
-  transform-origin: 25px 25px; /* 匹配circle的cx="25" cy="25" */
 }
 
 .loading-path {
-  animation: dash 1.4s ease-in-out infinite;
   stroke: currentColor;
   stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
 }
 
-/* 点状加载样式 */
-.loading-dots {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.loading-dot {
-  border-radius: 50%;
-  animation: bounce 1.4s ease-in-out infinite;
-}
-
-/* 脉冲样式 */
-.loading-pulse {
-  border-radius: 50%;
-  animation: pulse 1.4s ease-in-out infinite;
-}
-
-/* 环形样式 */
-.loading-ring {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.loading-ring-circle {
-  width: 100%;
-  height: 100%;
-  border-style: solid;
-  border-radius: 50%;
-  animation: spin 1.4s linear infinite;
-  transform-origin: center center;
-  box-shadow: 0 10px 20px rgba(232, 66, 77, 0.14);
-}
-
-/* 加载文本样式 */
 .loading-text {
-  font-size: 15px;
-  text-align: center;
-  white-space: nowrap;
-  font-weight: 600;
-  color: #c3414c;
-  letter-spacing: 0.3px;
+  font-size: 14px;
+  color: #fff;
+  font-weight: 500;
+  letter-spacing: 0.2px;
 }
 
-/* 动画定义 */
 @keyframes rotate {
   100% {
     transform: rotate(360deg);
@@ -390,79 +176,13 @@ const textStyle = computed(() => {
 
 @keyframes dash {
   0% {
-    stroke-dashoffset: 94.2;
+    stroke-dashoffset: 0;
   }
   50% {
-    stroke-dashoffset: 23.55;
-    transform: rotate(45deg);
+    stroke-dashoffset: -55;
   }
   100% {
-    stroke-dashoffset: 94.2;
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes bounce {
-  0%, 80%, 100% {
-    transform: scale(0);
-    opacity: 0.5;
-  }
-  40% {
-    transform: scale(1);
-    opacity: 1;
-  }
-}
-
-@keyframes pulse {
-  0% {
-    transform: scale(0.3);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 0;
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes pulseGlow {
-  0% {
-    transform: scale(0.92);
-    opacity: 0.8;
-  }
-  50% {
-    transform: scale(1);
-    opacity: 1;
-  }
-  100% {
-    transform: scale(1.05);
-    opacity: 0.9;
-  }
-}
-
-@keyframes float {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-12px);
+    stroke-dashoffset: -170;
   }
 }
 </style>
diff --git a/src/components/loading.ts b/src/components/loading.ts
index d22218d..5108354 100644
--- a/src/components/loading.ts
+++ b/src/components/loading.ts
@@ -48,12 +48,12 @@ export function showLoading(options: LoadingOptions = {}): LoadingInstance {
   const defaultOptions: LoadingOptions = {
     type: 'spinner',
     size: 42,
-    color: '#E8424D',
+    color: '#ffffff',
     fullscreen: true,
     text: '',
-    background: 'rgba(255, 241, 243, 0.8)',
-    opacity: 1,
-    strokeWidth: 3,
+    background: 'rgba(0, 0, 0, 0.28)',
+    opacity: 0.7,
+    strokeWidth: 4,
     strokeLinecap: 'round'
   }