chore: extend loader demo with unified square variants
This commit is contained in:
parent
3b521e9616
commit
df28c44c22
@ -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); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@ -117,6 +241,13 @@
|
||||
<div class="loader-item"><div class="loader-wrapper"><div class="loader-4"><div id="s1"></div><div id="s2"></div><div id="s3"></div><div id="s4"></div><div id="s5"></div></div></div><div class="loader-title">4. 五方块序列</div></div>
|
||||
<div class="loader-item"><div class="loader-wrapper"><div class="loader-5"><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div><div class="loader-5-box"></div></div></div><div class="loader-title">5. 九宫格动画</div></div>
|
||||
<div class="loader-item"><div class="loader-wrapper"><div class="loader-6"><div class="loader-6-cell d-0"></div><div class="loader-6-cell d-1"></div><div class="loader-6-cell d-2"></div><div class="loader-6-cell d-1"></div><div class="loader-6-cell d-2"></div><div class="loader-6-cell d-2"></div><div class="loader-6-cell d-3"></div><div class="loader-6-cell d-3"></div><div class="loader-6-cell d-4"></div></div></div><div class="loader-title">6. 波纹方块</div></div>
|
||||
<div class="loader-item"><div class="loader-wrapper"><div class="loader-7"><div class="loader-7-dot"></div><div class="loader-7-dot"></div><div class="loader-7-dot"></div><div class="loader-7-dot"></div></div></div><div class="loader-title">7. 牛顿摆（方块）</div></div>
|
||||
<div class="loader-item"><div class="loader-wrapper"><div class="loader-8"><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div><div class="loader-8-dot"></div></div></div><div class="loader-title">8. 脉冲环（方块）</div></div>
|
||||
<div class="loader-item"><div class="loader-wrapper"><div class="loader-9"><div class="loader-9-orbe" style="--index:0"></div><div class="loader-9-orbe" style="--index:1"></div><div class="loader-9-orbe" style="--index:2"></div><div class="loader-9-orbe" style="--index:3"></div><div class="loader-9-orbe" style="--index:4"></div></div></div><div class="loader-title">9. 轨道方块（虚化）</div></div>
|
||||
<div class="loader-item"><div class="loader-wrapper"><div class="loader-10"></div></div><div class="loader-title">10. 阴影滚动（方块）</div></div>
|
||||
<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>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user