From df28c44c22b646b07b4374e9061a64f1a7d4bab3 Mon Sep 17 00:00:00 2001 From: JOJO <1498581755@qq.com> Date: Sun, 5 Apr 2026 01:22:57 +0800 Subject: [PATCH] chore: extend loader demo with unified square variants --- static/demo/loaders-v2.html | 131 ++++++++++++++++++++++++++++++++++++ 1 file changed, 131 insertions(+) diff --git a/static/demo/loaders-v2.html b/static/demo/loaders-v2.html index 935bb55..6f52d8c 100644 --- a/static/demo/loaders-v2.html +++ b/static/demo/loaders-v2.html @@ -104,6 +104,130 @@ .loader-6-cell.d-4 { animation-delay: 400ms; } .loader-6-cell:nth-child(1), .loader-6-cell:nth-child(2), .loader-6-cell:nth-child(3), .loader-6-cell:nth-child(4), .loader-6-cell:nth-child(5), .loader-6-cell:nth-child(6), .loader-6-cell:nth-child(7), .loader-6-cell:nth-child(8), .loader-6-cell:nth-child(9) { --cell-color: var(--loader-color); } @keyframes l6-ripple { 0% { background-color: transparent; } 30% { background-color: var(--cell-color); } 60% { background-color: transparent; } 100% { background-color: transparent; } } + + /* 7. 牛顿摆（方块版） */ + .loader-7 { --uib-size: 28px; --uib-speed: 1.2s; position: relative; display: flex; align-items: center; justify-content: center; width: var(--uib-size); height: var(--uib-size); } + .loader-7-dot { position: relative; display: flex; align-items: center; justify-content: center; height: 100%; width: 25%; transform-origin: center top; } + .loader-7-dot::after { content: ""; position: absolute; top: 75%; width: 3px; height: 3px; background: var(--loader-color); } + .loader-7-dot:first-child { animation: l7-swing var(--uib-speed) linear infinite; } + .loader-7-dot:last-child { animation: l7-swing2 var(--uib-speed) linear infinite; } + @keyframes l7-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 l7-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; } } + + /* 8. 脉冲环（方块版） */ + .loader-8 { --uib-size: 22px; --uib-speed: .9s; position: relative; display: flex; align-items: center; justify-content: flex-start; height: var(--uib-size); width: var(--uib-size); } + .loader-8-dot { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: flex-start; height: 100%; width: 100%; } + .loader-8-dot::before { content: ""; height: 3px; width: 3px; background-color: var(--loader-color); transform: scale(0); opacity: 0.5; animation: l8-pulse calc(var(--uib-speed) * 1.111) ease-in-out infinite; } + .loader-8-dot:nth-child(2) { transform: rotate(45deg); } .loader-8-dot:nth-child(2)::before { animation-delay: calc(var(--uib-speed) * -0.875); } + .loader-8-dot:nth-child(3) { transform: rotate(90deg); } .loader-8-dot:nth-child(3)::before { animation-delay: calc(var(--uib-speed) * -0.75); } + .loader-8-dot:nth-child(4) { transform: rotate(135deg); } .loader-8-dot:nth-child(4)::before { animation-delay: calc(var(--uib-speed) * -0.625); } + .loader-8-dot:nth-child(5) { transform: rotate(180deg); } .loader-8-dot:nth-child(5)::before { animation-delay: calc(var(--uib-speed) * -0.5); } + .loader-8-dot:nth-child(6) { transform: rotate(225deg); } .loader-8-dot:nth-child(6)::before { animation-delay: calc(var(--uib-speed) * -0.375); } + .loader-8-dot:nth-child(7) { transform: rotate(270deg); } .loader-8-dot:nth-child(7)::before { animation-delay: calc(var(--uib-speed) * -0.25); } + .loader-8-dot:nth-child(8) { transform: rotate(315deg); } .loader-8-dot:nth-child(8)::before { animation-delay: calc(var(--uib-speed) * -0.125); } + @keyframes l8-pulse { 0%,100% { transform: scale(0); opacity: 0.5; } 50% { transform: scale(1); opacity: 1; } } + + /* 9. 轨道方块（去光晕，保留虚化） */ + .loader-9 { --size-loader: 24px; --size-orbe: 3px; width: var(--size-loader); height: var(--size-loader); position: relative; transform: rotate(45deg); } + .loader-9-orbe { position: absolute; width: 100%; height: 100%; --delay: calc(var(--index) * 0.1s); animation: l9-orbit ease-in-out 1.5s var(--delay) infinite; opacity: calc(1 - calc(0.18 * var(--index))); } + .loader-9-orbe::after { position: absolute; content: ""; top: 0; left: 0; width: var(--size-orbe); height: var(--size-orbe); background-color: var(--loader-color); filter: blur(0.35px); } + @keyframes l9-orbit { 0% {} 80% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } + + /* 10. 阴影滚动（方块版） */ + .loader-10 { --sq: 3px; width: var(--sq); height: var(--sq); position: relative; left: -10px; color: var(--loader-color); animation: l10-roll 2s linear infinite; } + @keyframes l10-roll { + 0% { box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent; } + 12% { box-shadow: 6px 0 var(--loader-color), 0 0 transparent, 0 0 transparent, 0 0 transparent; } + 25% { box-shadow: 12px 0 var(--loader-color), 6px 0 var(--loader-color), 0 0 transparent, 0 0 transparent; } + 36% { box-shadow: 18px 0 var(--loader-color), 12px 0 var(--loader-color), 6px 0 var(--loader-color), 0 0 transparent; } + 50% { box-shadow: 24px 0 var(--loader-color), 18px 0 var(--loader-color), 12px 0 var(--loader-color), 6px 0 var(--loader-color); } + 62% { box-shadow: 36px 0 transparent, 24px 0 var(--loader-color), 18px 0 var(--loader-color), 12px 0 var(--loader-color); } + 75% { box-shadow: 36px 0 transparent, 36px 0 transparent, 24px 0 var(--loader-color), 18px 0 var(--loader-color); } + 87% { box-shadow: 36px 0 transparent, 36px 0 transparent, 36px 0 transparent, 24px 0 var(--loader-color); } + 100% { box-shadow: 36px 0 transparent, 36px 0 transparent, 36px 0 transparent, 36px 0 transparent; } + } + + /* 11. 跳跃序列（方块版） */ + .loader-11 { position: relative; display: flex; gap: 5px; } + .loader-11-square { width: 3px; height: 3px; background: var(--loader-color); animation: l11-jump 2s infinite ease; } + .loader-11-square:nth-child(2n) { animation-delay: 300ms; } + .loader-11-square:nth-child(3n) { animation-delay: 600ms; } + @keyframes l11-jump { + 0%, 100% { transform: translateY(0); } + 25% { transform: translateY(-10px) scale(0.66); } + 50% { transform: translateY(0); } + 75% { transform: translateY(3px) scale(0.9); } + } + + /* 13. 混沌轨道（方块版） */ + .loader-13 { + --uib-size: 24px; + --uib-speed: 1.5s; + position: relative; + width: var(--uib-size); + height: var(--uib-size); + display: flex; + align-items: center; + justify-content: center; + animation: l13-rotate calc(var(--uib-speed) * 1.667) linear infinite; + } + .loader-13::before, .loader-13::after { + content: ""; + position: absolute; + width: 3px; + height: 3px; + background: var(--loader-color); + will-change: transform; + } + .loader-13::before { animation: l13-orbit var(--uib-speed) linear infinite; } + .loader-13::after { animation: l13-orbit var(--uib-speed) linear calc(var(--uib-speed)/-2) infinite; } + @keyframes l13-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } + @keyframes l13-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; } + } + + /* 14. 跳蛙（方块版） */ + .loader-14 { + --uib-size: 24px; + --uib-speed: 2s; + position: relative; + width: var(--uib-size); + height: var(--uib-size); + display: flex; + align-items: center; + justify-content: space-between; + } + .loader-14-dot { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: flex-start; + animation: l14-leap var(--uib-speed) ease infinite; + } + .loader-14-dot::before { + content: ""; + width: 3px; + height: 3px; + background: var(--loader-color); + will-change: transform; + } + .loader-14-dot:nth-child(2) { transform: translateX(calc(var(--uib-size) * 0.4)); animation-delay: calc(var(--uib-speed) / -1.5); } + .loader-14-dot:nth-child(3) { transform: translateX(calc(var(--uib-size) * 0.8)); animation-delay: calc(var(--uib-speed) / -3); } + @keyframes l14-leap { + 0% { transform: translateX(0) rotate(0deg); } + 33.333% { transform: translateX(0) rotate(180deg); } + 66.666% { transform: translateX(calc(var(--uib-size) * -0.4)) rotate(180deg); } + 99.999% { transform: translateX(calc(var(--uib-size) * -0.8)) rotate(180deg); } + 100% { transform: translateX(0) rotate(0deg); } + } @@ -117,6 +241,13 @@
4. 五方块序列
5. 九宫格动画
6. 波纹方块
+
7. 牛顿摆（方块）
+
8. 脉冲环（方块）
+
9. 轨道方块（虚化）
+
10. 阴影滚动（方块）
+
11. 跳跃序列（方块）
+
13. 混沌轨道（方块）
+
14. 跳蛙（方块）