From 3b521e961676bba6b382996208d0d2de5743d340 Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Sun, 5 Apr 2026 01:22:50 +0800
Subject: [PATCH] feat: expand square loader set and tune bouncing

---
 .../chat/loaders/BouncingSquaresLoader.vue    | 42 ++++++-----
 .../loaders/ChaoticOrbitSquaresLoader.vue     | 44 ++++++++++++
 .../chat/loaders/DotSpinnerSquaresLoader.vue  | 70 +++++++++++++++++++
 .../loaders/JumpingSequenceSquaresLoader.vue  | 38 ++++++++++
 .../chat/loaders/LeapFrogSquaresLoader.vue    | 61 ++++++++++++++++
 .../loaders/NewtonCradleSquaresLoader.vue     | 61 ++++++++++++++++
 .../chat/loaders/OrbitBlurSquaresLoader.vue   | 50 +++++++++++++
 .../loaders/ShadowRollingSquaresLoader.vue    | 31 ++++++++
 static/src/components/chat/loaders/index.ts   | 16 ++++-
 9 files changed, 396 insertions(+), 17 deletions(-)
 create mode 100644 static/src/components/chat/loaders/ChaoticOrbitSquaresLoader.vue
 create mode 100644 static/src/components/chat/loaders/DotSpinnerSquaresLoader.vue
 create mode 100644 static/src/components/chat/loaders/JumpingSequenceSquaresLoader.vue
 create mode 100644 static/src/components/chat/loaders/LeapFrogSquaresLoader.vue
 create mode 100644 static/src/components/chat/loaders/NewtonCradleSquaresLoader.vue
 create mode 100644 static/src/components/chat/loaders/OrbitBlurSquaresLoader.vue
 create mode 100644 static/src/components/chat/loaders/ShadowRollingSquaresLoader.vue

diff --git a/static/src/components/chat/loaders/BouncingSquaresLoader.vue b/static/src/components/chat/loaders/BouncingSquaresLoader.vue
index c198fb9..3eee72a 100644
--- a/static/src/components/chat/loaders/BouncingSquaresLoader.vue
+++ b/static/src/components/chat/loaders/BouncingSquaresLoader.vue
@@ -12,43 +12,53 @@
 
 <style scoped>
 .bouncing-squares-loader {
-  --square-size: 3px;
-  --square-gap: 10px;
-  display: grid;
-  grid-template-columns: repeat(3, var(--square-size));
-  column-gap: var(--square-gap);
-  align-items: end;
-  width: calc(3 * var(--square-size) + 2 * var(--square-gap));
+  --loader-scale: 0.45;
+  --square-size: 7.6px; /* 7.6 * 0.45 ≈ 3.42px，略大一点 */
+  --square-gap: 8.9px;  /* 固定间距，缩放后约 4px */
+  --start-x: 3px;
+  position: relative;
+  width: 40px;
   height: 20px;
+  transform: scale(var(--loader-scale));
+  transform-origin: center;
 }
 
 .square {
+  position: absolute;
   width: var(--square-size);
   height: var(--square-size);
+  left: 15%;
   background-color: var(--claude-text-tertiary);
-  transform-origin: center bottom;
-  animation: bounce-square .5s alternate infinite ease;
+  transform-origin: 50%;
+  animation: bounce-square 0.5s alternate infinite ease;
 }
 
 @keyframes bounce-square {
   0% {
-    transform: translateY(0) scaleX(1.7) scaleY(0.7);
+    top: 20px;
+    height: calc(var(--square-size) * 0.667);
+    transform: scaleX(1.7);
   }
-
   40% {
-    transform: translateY(-8px) scaleX(1) scaleY(1);
+    height: var(--square-size);
+    transform: scaleX(1);
   }
-
   100% {
-    transform: translateY(-17px) scaleX(1) scaleY(1);
+    top: 0%;
   }
 }
 
+.square:nth-child(1) {
+  left: var(--start-x);
+}
+
 .square:nth-child(2) {
-  animation-delay: .2s;
+  left: calc(var(--start-x) + var(--square-size) + var(--square-gap));
+  animation-delay: 0.2s;
 }
 
 .square:nth-child(3) {
-  animation-delay: .3s;
+  left: calc(var(--start-x) + (var(--square-size) + var(--square-gap)) * 2);
+  animation-delay: 0.3s;
 }
 </style>
diff --git a/static/src/components/chat/loaders/ChaoticOrbitSquaresLoader.vue b/static/src/components/chat/loaders/ChaoticOrbitSquaresLoader.vue
new file mode 100644
index 0000000..78913b6
--- /dev/null
+++ b/static/src/components/chat/loaders/ChaoticOrbitSquaresLoader.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="chaotic-orbit-loader"></div>
+</template>
+
+<script setup lang="ts">
+// Based on Uiverse (dovatgabriel), square-styled
+</script>
+
+<style scoped>
+.chaotic-orbit-loader {
+  --size: 24px;
+  --speed: 1.5s;
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: rotate calc(var(--speed) * 1.667) linear infinite;
+}
+
+.chaotic-orbit-loader::before,
+.chaotic-orbit-loader::after {
+  content: "";
+  position: absolute;
+  width: 3px;
+  height: 3px;
+  background: var(--claude-text-tertiary);
+  will-change: transform;
+}
+
+.chaotic-orbit-loader::before { animation: orbit var(--speed) linear infinite; }
+.chaotic-orbit-loader::after { animation: orbit var(--speed) linear calc(var(--speed) / -2) infinite; }
+
+@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+@keyframes orbit {
+  0% { transform: translate(12px) scale(.74); opacity:.65; }
+  25% { transform: translate(0) scale(.47); opacity:.3; }
+  50% { transform: translate(-12px) scale(.74); opacity:.65; }
+  75% { transform: translate(0) scale(1); opacity:1; }
+  100% { transform: translate(12px) scale(.74); opacity:.65; }
+}
+</style>
diff --git a/static/src/components/chat/loaders/DotSpinnerSquaresLoader.vue b/static/src/components/chat/loaders/DotSpinnerSquaresLoader.vue
new file mode 100644
index 0000000..817169f
--- /dev/null
+++ b/static/src/components/chat/loaders/DotSpinnerSquaresLoader.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="dot-spinner-loader">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Based on Uiverse (abrahamcalsin), square-styled
+</script>
+
+<style scoped>
+.dot-spinner-loader {
+  --size: 22px;
+  --speed: .9s;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: var(--size);
+  height: var(--size);
+}
+
+.dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  height: 100%;
+}
+
+.dot::before {
+  content: "";
+  width: 3px;
+  height: 3px;
+  background: var(--claude-text-tertiary);
+  transform: scale(0);
+  opacity: .5;
+  animation: pulse calc(var(--speed) * 1.111) ease-in-out infinite;
+}
+
+.dot:nth-child(2) { transform: rotate(45deg); }
+.dot:nth-child(2)::before { animation-delay: calc(var(--speed) * -0.875); }
+.dot:nth-child(3) { transform: rotate(90deg); }
+.dot:nth-child(3)::before { animation-delay: calc(var(--speed) * -0.75); }
+.dot:nth-child(4) { transform: rotate(135deg); }
+.dot:nth-child(4)::before { animation-delay: calc(var(--speed) * -0.625); }
+.dot:nth-child(5) { transform: rotate(180deg); }
+.dot:nth-child(5)::before { animation-delay: calc(var(--speed) * -0.5); }
+.dot:nth-child(6) { transform: rotate(225deg); }
+.dot:nth-child(6)::before { animation-delay: calc(var(--speed) * -0.375); }
+.dot:nth-child(7) { transform: rotate(270deg); }
+.dot:nth-child(7)::before { animation-delay: calc(var(--speed) * -0.25); }
+.dot:nth-child(8) { transform: rotate(315deg); }
+.dot:nth-child(8)::before { animation-delay: calc(var(--speed) * -0.125); }
+
+@keyframes pulse {
+  0%, 100% { transform: scale(0); opacity: .5; }
+  50% { transform: scale(1); opacity: 1; }
+}
+</style>
diff --git a/static/src/components/chat/loaders/JumpingSequenceSquaresLoader.vue b/static/src/components/chat/loaders/JumpingSequenceSquaresLoader.vue
new file mode 100644
index 0000000..0d048c0
--- /dev/null
+++ b/static/src/components/chat/loaders/JumpingSequenceSquaresLoader.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="jumping-seq-loader">
+    <div class="sq"></div>
+    <div class="sq"></div>
+    <div class="sq"></div>
+    <div class="sq"></div>
+    <div class="sq"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Based on Uiverse (EddyBel), square-styled
+</script>
+
+<style scoped>
+.jumping-seq-loader {
+  position: relative;
+  display: flex;
+  gap: 5px;
+}
+
+.sq {
+  width: 3px;
+  height: 3px;
+  background: var(--claude-text-tertiary);
+  animation: jump 2s ease infinite;
+}
+
+.sq:nth-child(2n) { animation-delay: 300ms; }
+.sq:nth-child(3n) { animation-delay: 600ms; }
+
+@keyframes jump {
+  0%, 100% { transform: translateY(0); }
+  25% { transform: translateY(-10px) scale(0.66); }
+  50% { transform: translateY(0); }
+  75% { transform: translateY(3px) scale(0.9); }
+}
+</style>
diff --git a/static/src/components/chat/loaders/LeapFrogSquaresLoader.vue b/static/src/components/chat/loaders/LeapFrogSquaresLoader.vue
new file mode 100644
index 0000000..24187d0
--- /dev/null
+++ b/static/src/components/chat/loaders/LeapFrogSquaresLoader.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="leap-frog-loader">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Based on Uiverse (dovatgabriel), square-styled
+</script>
+
+<style scoped>
+.leap-frog-loader {
+  --size: 24px;
+  --speed: 2s;
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  animation: leap var(--speed) ease infinite;
+}
+
+.dot::before {
+  content: "";
+  width: 3px;
+  height: 3px;
+  background: var(--claude-text-tertiary);
+}
+
+.dot:nth-child(2) {
+  transform: translateX(calc(var(--size) * 0.4));
+  animation-delay: calc(var(--speed) / -1.5);
+}
+
+.dot:nth-child(3) {
+  transform: translateX(calc(var(--size) * 0.8));
+  animation-delay: calc(var(--speed) / -3);
+}
+
+@keyframes leap {
+  0% { transform: translateX(0) rotate(0deg); }
+  33.333% { transform: translateX(0) rotate(180deg); }
+  66.666% { transform: translateX(calc(var(--size) * -0.4)) rotate(180deg); }
+  99.999% { transform: translateX(calc(var(--size) * -0.8)) rotate(180deg); }
+  100% { transform: translateX(0) rotate(0deg); }
+}
+</style>
diff --git a/static/src/components/chat/loaders/NewtonCradleSquaresLoader.vue b/static/src/components/chat/loaders/NewtonCradleSquaresLoader.vue
new file mode 100644
index 0000000..d3e3efc
--- /dev/null
+++ b/static/src/components/chat/loaders/NewtonCradleSquaresLoader.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="newton-loader">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Based on Uiverse (dovatgabriel), square-styled
+</script>
+
+<style scoped>
+.newton-loader {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dot {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 25%;
+  transform-origin: center top;
+}
+
+.dot::after {
+  content: "";
+  position: absolute;
+  top: 75%;
+  width: 3px;
+  height: 3px;
+  background: var(--claude-text-tertiary);
+}
+
+.dot:first-child {
+  animation: swing 1.2s linear infinite;
+}
+
+.dot:last-child {
+  animation: swing2 1.2s linear infinite;
+}
+
+@keyframes swing {
+  0% { transform: rotate(0deg); animation-timing-function: ease-out; }
+  25% { transform: rotate(70deg); animation-timing-function: ease-in; }
+  50% { transform: rotate(0deg); animation-timing-function: linear; }
+}
+
+@keyframes swing2 {
+  0% { transform: rotate(0deg); animation-timing-function: linear; }
+  50% { transform: rotate(0deg); animation-timing-function: ease-out; }
+  75% { transform: rotate(-70deg); animation-timing-function: ease-in; }
+}
+</style>
diff --git a/static/src/components/chat/loaders/OrbitBlurSquaresLoader.vue b/static/src/components/chat/loaders/OrbitBlurSquaresLoader.vue
new file mode 100644
index 0000000..5c30a70
--- /dev/null
+++ b/static/src/components/chat/loaders/OrbitBlurSquaresLoader.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="orbit-loader">
+    <div class="orbe" style="--index: 0"></div>
+    <div class="orbe" style="--index: 1"></div>
+    <div class="orbe" style="--index: 2"></div>
+    <div class="orbe" style="--index: 3"></div>
+    <div class="orbe" style="--index: 4"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// Based on Uiverse (krlozCJ), square + blur, no glow
+</script>
+
+<style scoped>
+.orbit-loader {
+  --size-loader: 24px;
+  --size-orbe: 3px;
+  width: var(--size-loader);
+  height: var(--size-loader);
+  position: relative;
+  transform: rotate(45deg);
+}
+
+.orbe {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  --delay: calc(var(--index) * 0.1s);
+  opacity: calc(1 - calc(0.18 * var(--index)));
+  animation: orbit 1.5s var(--delay) ease-in-out infinite;
+}
+
+.orbe::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: var(--size-orbe);
+  height: var(--size-orbe);
+  background: var(--claude-text-tertiary);
+  filter: blur(0.35px);
+}
+
+@keyframes orbit {
+  0% {}
+  80% { transform: rotate(360deg); }
+  100% { transform: rotate(360deg); }
+}
+</style>
diff --git a/static/src/components/chat/loaders/ShadowRollingSquaresLoader.vue b/static/src/components/chat/loaders/ShadowRollingSquaresLoader.vue
new file mode 100644
index 0000000..7ed88e1
--- /dev/null
+++ b/static/src/components/chat/loaders/ShadowRollingSquaresLoader.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="shadow-rolling-loader"></div>
+</template>
+
+<script setup lang="ts">
+// Based on Uiverse (alexruix), square-styled
+</script>
+
+<style scoped>
+.shadow-rolling-loader {
+  --sq: 3px;
+  width: var(--sq);
+  height: var(--sq);
+  position: relative;
+  left: -10px;
+  color: var(--claude-text-tertiary);
+  animation: roll 2s linear infinite;
+}
+
+@keyframes roll {
+  0%   { box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent; }
+  12%  { box-shadow: 6px 0 currentColor, 0 0 transparent, 0 0 transparent, 0 0 transparent; }
+  25%  { box-shadow: 12px 0 currentColor, 6px 0 currentColor, 0 0 transparent, 0 0 transparent; }
+  36%  { box-shadow: 18px 0 currentColor, 12px 0 currentColor, 6px 0 currentColor, 0 0 transparent; }
+  50%  { box-shadow: 24px 0 currentColor, 18px 0 currentColor, 12px 0 currentColor, 6px 0 currentColor; }
+  62%  { box-shadow: 36px 0 transparent, 24px 0 currentColor, 18px 0 currentColor, 12px 0 currentColor; }
+  75%  { box-shadow: 36px 0 transparent, 36px 0 transparent, 24px 0 currentColor, 18px 0 currentColor; }
+  87%  { box-shadow: 36px 0 transparent, 36px 0 transparent, 36px 0 transparent, 24px 0 currentColor; }
+  100% { box-shadow: 36px 0 transparent, 36px 0 transparent, 36px 0 transparent, 36px 0 transparent; }
+}
+</style>
diff --git a/static/src/components/chat/loaders/index.ts b/static/src/components/chat/loaders/index.ts
index 299ae44..16659f6 100644
--- a/static/src/components/chat/loaders/index.ts
+++ b/static/src/components/chat/loaders/index.ts
@@ -6,6 +6,13 @@ import BouncingSquaresLoader from './BouncingSquaresLoader.vue';
 import FiveSquaresLoader from './FiveSquaresLoader.vue';
 import NineGridLoader from './NineGridLoader.vue';
 import RippleLoader from './RippleLoader.vue';
+import NewtonCradleSquaresLoader from './NewtonCradleSquaresLoader.vue';
+import DotSpinnerSquaresLoader from './DotSpinnerSquaresLoader.vue';
+import OrbitBlurSquaresLoader from './OrbitBlurSquaresLoader.vue';
+import ShadowRollingSquaresLoader from './ShadowRollingSquaresLoader.vue';
+import JumpingSequenceSquaresLoader from './JumpingSequenceSquaresLoader.vue';
+import ChaoticOrbitSquaresLoader from './ChaoticOrbitSquaresLoader.vue';
+import LeapFrogSquaresLoader from './LeapFrogSquaresLoader.vue';
 
 // 加载动画池
 export const loaderPool: Component[] = [
@@ -15,7 +22,14 @@ export const loaderPool: Component[] = [
   BouncingSquaresLoader,
   FiveSquaresLoader,
   NineGridLoader,
-  RippleLoader
+  RippleLoader,
+  NewtonCradleSquaresLoader,
+  DotSpinnerSquaresLoader,
+  OrbitBlurSquaresLoader,
+  ShadowRollingSquaresLoader,
+  JumpingSequenceSquaresLoader,
+  ChaoticOrbitSquaresLoader,
+  LeapFrogSquaresLoader
 ];
 
 // 至少间隔多少次后才允许重复（例如 4 表示最近 4 次不重复）