From de1aebeaa89eb1164b50aa43f92dcca1b666da3f Mon Sep 17 00:00:00 2001
From: JOJO <1498581755@qq.com>
Date: Sun, 5 Apr 2026 15:14:06 +0800
Subject: [PATCH] feat: add loaders 15-17 to minimal loader pool
---
static/demo/loaders-v2.html | 82 +++++++++++++++++++
.../chat/loaders/FollowTrackSquaresLoader.vue | 42 ++++++++++
.../loaders/FourCornerCycleSquaresLoader.vue | 44 ++++++++++
.../chat/loaders/WaveMatrixSquaresLoader.vue | 41 ++++++++++
static/src/components/chat/loaders/index.ts | 8 +-
5 files changed, 216 insertions(+), 1 deletion(-)
create mode 100644 static/src/components/chat/loaders/FollowTrackSquaresLoader.vue
create mode 100644 static/src/components/chat/loaders/FourCornerCycleSquaresLoader.vue
create mode 100644 static/src/components/chat/loaders/WaveMatrixSquaresLoader.vue
diff --git a/static/demo/loaders-v2.html b/static/demo/loaders-v2.html
index 6f52d8c..ffb95b2 100644
--- 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; }
+
@@ -248,6 +327,9 @@
+
+
+
diff --git a/static/src/components/chat/loaders/FollowTrackSquaresLoader.vue b/static/src/components/chat/loaders/FollowTrackSquaresLoader.vue
new file mode 100644
index 0000000..e5a867a
--- /dev/null
+++ b/static/src/components/chat/loaders/FollowTrackSquaresLoader.vue
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
diff --git a/static/src/components/chat/loaders/FourCornerCycleSquaresLoader.vue b/static/src/components/chat/loaders/FourCornerCycleSquaresLoader.vue
new file mode 100644
index 0000000..74329e8
--- /dev/null
+++ b/static/src/components/chat/loaders/FourCornerCycleSquaresLoader.vue
@@ -0,0 +1,44 @@
+
+
+
+
+
+
+
diff --git a/static/src/components/chat/loaders/WaveMatrixSquaresLoader.vue b/static/src/components/chat/loaders/WaveMatrixSquaresLoader.vue
new file mode 100644
index 0000000..8794d19
--- /dev/null
+++ b/static/src/components/chat/loaders/WaveMatrixSquaresLoader.vue
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
diff --git a/static/src/components/chat/loaders/index.ts b/static/src/components/chat/loaders/index.ts
index 16659f6..ffafdd7 100644
--- 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 次不重复）