feat: add loaders 15-17 to minimal loader pool

2026-04-05 15:14:06 +08:00 · 2026-04-05 15:14:06 +08:00 · de1aebeaa8
commit de1aebeaa8
parent 7496d8a3c6
5 changed files with 216 additions and 1 deletions
--- a/static/demo/loaders-v2.html
+++ b/static/demo/loaders-v2.html
@ -159,6 +159,34 @@
      75% { transform: translateY(3px) scale(0.9); }
    }

+    /* 17. 四角循环（方块统一版） */
+    .loader-17 {
+      width: 24px;
+      height: 24px;
+      position: relative;
+    }
+    .loader-17-square {
+      width: 3px;
+      height: 3px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -1.5px;
+      margin-left: -1.5px;
+      background: var(--loader-color);
+      animation: l17-move 1.8s ease-in-out infinite;
+    }
+    .loader-17-square:nth-child(1) { animation-delay: -0.45s; }
+    .loader-17-square:nth-child(2) { animation-delay: -0.9s; }
+    .loader-17-square:nth-child(3) { animation-delay: -1.35s; }
+    .loader-17-square:nth-child(4) { animation-delay: -1.8s; }
+    @keyframes l17-move {
+      0%, 100% { transform: translate(-6px, -6px); }
+      25% { transform: translate(6px, -6px); }
+      50% { transform: translate(6px, 6px); }
+      75% { transform: translate(-6px, 6px); }
+    }
+
    /* 13. 混沌轨道（方块版） */
    .loader-13 {
      --uib-size: 24px;
@ -228,6 +256,57 @@
      99.999% { transform: translateX(calc(var(--uib-size) * -0.8)) rotate(180deg); }
      100% { transform: translateX(0) rotate(0deg); }
    }
+
+    /* 15. 波浪点阵（方块统一版） */
+    .loader-15 {
+      --uib-size: 28px;
+      --uib-speed: 0.7s;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: var(--uib-size);
+      height: 16px;
+    }
+    .loader-15-square {
+      width: 3px;
+      height: 3px;
+      background: var(--loader-color);
+      animation: l15-wave var(--uib-speed) ease-in-out infinite;
+    }
+    .loader-15-square:nth-child(1) { animation-delay: calc(var(--uib-speed) * -0.45); }
+    .loader-15-square:nth-child(2) { animation-delay: calc(var(--uib-speed) * -0.3); }
+    .loader-15-square:nth-child(3) { animation-delay: calc(var(--uib-speed) * -0.15); }
+    .loader-15-square:nth-child(4) { animation-delay: 0s; }
+    @keyframes l15-wave {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-8px); }
+    }
+
+    /* 16. 跟随轨迹（方块统一版） */
+    @keyframes l16-follow-the-leader {
+      0% { transform: rotate(0deg) translateY(-4px); }
+      60%, 100% { transform: rotate(360deg) translateY(-4px); }
+    }
+    .loader-16 {
+      width: 10px;
+      height: 22px;
+      position: relative;
+    }
+    .loader-16-square {
+      width: 2px;
+      height: 2px;
+      position: absolute;
+      left: 50%;
+      margin-left: -1px;
+      animation: l16-follow-the-leader 1.25s infinite;
+      background: var(--loader-color);
+    }
+    .loader-16-square:nth-child(1) { top: 0; animation-delay: 0.15s; }
+    .loader-16-square:nth-child(2) { top: 5px; animation-delay: 0.3s; }
+    .loader-16-square:nth-child(3) { top: 10px; animation-delay: 0.45s; }
+    .loader-16-square:nth-child(4) { top: 15px; animation-delay: 0.6s; }
+    .loader-16-square:nth-child(5) { top: 20px; animation-delay: 0.75s; }
+
  </style>
 </head>
 <body>
@ -248,6 +327,9 @@
      <div class="loader-item"><div class="loader-wrapper"><div class="loader-11"><div class="loader-11-square"></div><div class="loader-11-square"></div><div class="loader-11-square"></div><div class="loader-11-square"></div><div class="loader-11-square"></div></div></div><div class="loader-title">11. 跳跃序列（方块）</div></div>
      <div class="loader-item"><div class="loader-wrapper"><div class="loader-13"></div></div><div class="loader-title">13. 混沌轨道（方块）</div></div>
      <div class="loader-item"><div class="loader-wrapper"><div class="loader-14"><div class="loader-14-dot"></div><div class="loader-14-dot"></div><div class="loader-14-dot"></div></div></div><div class="loader-title">14. 跳蛙（方块）</div></div>
+      <div class="loader-item"><div class="loader-wrapper"><div class="loader-15"><div class="loader-15-square"></div><div class="loader-15-square"></div><div class="loader-15-square"></div><div class="loader-15-square"></div></div></div><div class="loader-title">15. 波浪点阵（新）</div></div>
+      <div class="loader-item"><div class="loader-wrapper"><div class="loader-16"><div class="loader-16-square"></div><div class="loader-16-square"></div><div class="loader-16-square"></div><div class="loader-16-square"></div><div class="loader-16-square"></div></div></div><div class="loader-title">16. 跟随轨迹</div></div>
+      <div class="loader-item"><div class="loader-wrapper"><div class="loader-17"><div class="loader-17-square"></div><div class="loader-17-square"></div><div class="loader-17-square"></div><div class="loader-17-square"></div></div></div><div class="loader-title">17. 四角循环（新）</div></div>
    </div>
  </div>
 </body>
--- a/static/src/components/chat/loaders/FollowTrackSquaresLoader.vue
+++ b/static/src/components/chat/loaders/FollowTrackSquaresLoader.vue
@ -0,0 +1,42 @@
+<template>
+  <div class="follow-track-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">
+// 16. 跟随轨迹（方块统一版）
+</script>
+
+<style scoped>
+.follow-track-loader {
+  width: 10px;
+  height: 22px;
+  position: relative;
+}
+
+.sq {
+  width: 2px;
+  height: 2px;
+  position: absolute;
+  left: 50%;
+  margin-left: -1px;
+  background: var(--claude-text-tertiary);
+  animation: follow-track 1.25s infinite;
+}
+
+.sq:nth-child(1) { top: 0; animation-delay: 0.15s; }
+.sq:nth-child(2) { top: 5px; animation-delay: 0.3s; }
+.sq:nth-child(3) { top: 10px; animation-delay: 0.45s; }
+.sq:nth-child(4) { top: 15px; animation-delay: 0.6s; }
+.sq:nth-child(5) { top: 20px; animation-delay: 0.75s; }
+
+@keyframes follow-track {
+  0% { transform: rotate(0deg) translateY(-4px); }
+  60%, 100% { transform: rotate(360deg) translateY(-4px); }
+}
+</style>
--- a/static/src/components/chat/loaders/FourCornerCycleSquaresLoader.vue
+++ b/static/src/components/chat/loaders/FourCornerCycleSquaresLoader.vue
@ -0,0 +1,44 @@
+<template>
+  <div class="four-corner-loader">
+    <div class="sq"></div>
+    <div class="sq"></div>
+    <div class="sq"></div>
+    <div class="sq"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 17. 四角循环（方块统一版）
+</script>
+
+<style scoped>
+.four-corner-loader {
+  width: 24px;
+  height: 24px;
+  position: relative;
+}
+
+.sq {
+  width: 3px;
+  height: 3px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin-top: -1.5px;
+  margin-left: -1.5px;
+  background: var(--claude-text-tertiary);
+  animation: corner-cycle 1.8s ease-in-out infinite;
+}
+
+.sq:nth-child(1) { animation-delay: -0.45s; }
+.sq:nth-child(2) { animation-delay: -0.9s; }
+.sq:nth-child(3) { animation-delay: -1.35s; }
+.sq:nth-child(4) { animation-delay: -1.8s; }
+
+@keyframes corner-cycle {
+  0%, 100% { transform: translate(-6px, -6px); }
+  25% { transform: translate(6px, -6px); }
+  50% { transform: translate(6px, 6px); }
+  75% { transform: translate(-6px, 6px); }
+}
+</style>
--- a/static/src/components/chat/loaders/WaveMatrixSquaresLoader.vue
+++ b/static/src/components/chat/loaders/WaveMatrixSquaresLoader.vue
@ -0,0 +1,41 @@
+<template>
+  <div class="wave-matrix-loader">
+    <div class="sq"></div>
+    <div class="sq"></div>
+    <div class="sq"></div>
+    <div class="sq"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+// 15. 波浪点阵（方块统一版）
+</script>
+
+<style scoped>
+.wave-matrix-loader {
+  --size: 28px;
+  --speed: 0.7s;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: var(--size);
+  height: 16px;
+}
+
+.sq {
+  width: 3px;
+  height: 3px;
+  background: var(--claude-text-tertiary);
+  animation: wave var(--speed) ease-in-out infinite;
+}
+
+.sq:nth-child(1) { animation-delay: calc(var(--speed) * -0.45); }
+.sq:nth-child(2) { animation-delay: calc(var(--speed) * -0.3); }
+.sq:nth-child(3) { animation-delay: calc(var(--speed) * -0.15); }
+.sq:nth-child(4) { animation-delay: 0s; }
+
+@keyframes wave {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+</style>
--- a/static/src/components/chat/loaders/index.ts
+++ b/static/src/components/chat/loaders/index.ts
@ -13,6 +13,9 @@ import ShadowRollingSquaresLoader from './ShadowRollingSquaresLoader.vue';
 import JumpingSequenceSquaresLoader from './JumpingSequenceSquaresLoader.vue';
 import ChaoticOrbitSquaresLoader from './ChaoticOrbitSquaresLoader.vue';
 import LeapFrogSquaresLoader from './LeapFrogSquaresLoader.vue';
+import WaveMatrixSquaresLoader from './WaveMatrixSquaresLoader.vue';
+import FollowTrackSquaresLoader from './FollowTrackSquaresLoader.vue';
+import FourCornerCycleSquaresLoader from './FourCornerCycleSquaresLoader.vue';

 // 加载动画池
 export const loaderPool: Component[] = [
@ -29,7 +32,10 @@ export const loaderPool: Component[] = [
  ShadowRollingSquaresLoader,
  JumpingSequenceSquaresLoader,
  ChaoticOrbitSquaresLoader,
-  LeapFrogSquaresLoader
+  LeapFrogSquaresLoader,
+  WaveMatrixSquaresLoader,
+  FollowTrackSquaresLoader,
+  FourCornerCycleSquaresLoader
 ];

 // 至少间隔多少次后才允许重复（例如 4 表示最近 4 次不重复）