پیشنمایش زنده
کد HTML
<div class="uv-browser-loader" role="status" aria-label="Loading">
<div class="uv-topbar">
<span class="uv-dot"></span>
<span class="uv-dot"></span>
<span class="uv-dot"></span>
<div class="uv-url"></div>
</div>
<div class="uv-body">
<div class="uv-row uv-h1"></div>
<div class="uv-row"></div>
<div class="uv-row"></div>
<div class="uv-row uv-short"></div>
<div class="uv-trace" aria-hidden="true"></div>
<div class="uv-loading">
<span>Loading</span>
<span class="uv-ell">…</span>
</div>
</div>
</div>
کد CSS
.uv-browser-loader {
width: 320px;
border-radius: 18px;
/* 日间模式:浅灰色边框 */
border: 1px solid rgba(202, 202, 202, 1);
/* 日间模式:纯白色背景 */
background: #ffffff;
/* 替换为指定的投影样式 */
box-shadow: 0 6px 21.4px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
position: relative;
}
.uv-topbar {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
/* 日间模式:更浅的边框色 */
border-bottom: 1px solid rgba(200, 200, 200, 0.6);
/* 日间模式:浅灰色渐变背景 */
background: linear-gradient(
180deg,
rgba(248, 248, 248, 0.9),
rgba(255, 255, 255, 0.95)
);
}
.uv-dot {
width: 10px;
height: 10px;
border-radius: 999px;
/* 日间模式:浅灰色圆点 */
background: rgba(242, 242, 242, 1);
box-shadow: inset 0 0 0 1px rgba(180, 180, 180, 0.5);
}
.uv-url {
margin-left: auto;
width: 150px;
height: 12px;
border-radius: 999px;
/* 日间模式:极浅的灰色背景 */
}
.uv-body {
padding: 16px 14px 14px;
position: relative;
}
.uv-row {
height: 12px;
border-radius: 10px;
/* 日间模式:浅灰色骨架背景 */
background: rgba(221, 221, 221, 0.4);
margin: 10px 0;
overflow: hidden;
position: relative;
}
.uv-h1 {
height: 14px;
width: 72%;
}
.uv-short {
width: 56%;
}
/* skeleton shimmer - 适配日间模式的高亮效果 */
.uv-row::before {
content: "";
position: absolute;
inset: -40% -60%;
background: linear-gradient(
110deg,
transparent 0%,
rgba(255, 255, 255, 0.8) 22%,
rgba(230, 230, 230, 0.9) 30%,
transparent 44%
);
transform: translateX(-60%);
animation: uvShimmer 1.15s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
mix-blend-mode: screen;
}
.uv-trace {
margin-top: 14px;
height: 4px;
border-radius: 999px;
/* 日间模式:浅灰色轨迹背景 */
background: rgba(221, 221, 221, 0.6);
overflow: hidden;
position: relative;
}
.uv-trace::before {
content: "";
position: absolute;
inset: 0;
/* 日间模式:更柔和的渐变色调 */
background: linear-gradient(
90deg,
rgba(220, 220, 220, 1),
rgba(180, 240, 255, 0.8),
rgba(210, 185, 255, 0.7),
rgba(230, 230, 230, 1)
);
transform: translateX(-70%);
animation: uvTrace 1.05s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
filter: saturate(1.1);
}
/* Loading text shine - 适配日间模式的文字颜色 */
.uv-loading {
margin-top: 14px;
font:
600 12px/1 ui-sans-serif,
system-ui;
letter-spacing: 0.2px;
/* 日间模式:深灰色文字 */
color: rgba(50, 50, 50, 1);
display: inline-flex;
align-items: center;
gap: 6px;
position: relative;
}
.uv-loading span:first-child {
position: relative;
/* 日间模式:深灰到浅灰的文字渐变 */
background: linear-gradient(
90deg,
rgba(50, 50, 50, 1),
rgba(100, 100, 100, 1),
rgba(180, 180, 180, 0.8)
);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
background-size: 200% 100%;
animation: uvTextShine 1.1s ease-in-out infinite;
}
.uv-ell {
opacity: 0.65;
animation: uvDots 1s steps(3, end) infinite;
}
/* 保留原有动画逻辑,无需修改 */
@keyframes uvShimmer {
to {
transform: translateX(60%);
}
}
@keyframes uvTrace {
to {
transform: translateX(70%);
}
}
@keyframes uvTextShine {
0% {
background-position: 0% 50%;
opacity: 0.7;
}
50% {
opacity: 1;
}
100% {
background-position: 100% 50%;
opacity: 0.75;
}
}
@keyframes uvDots {
0% {
opacity: 0.35;
}
50% {
opacity: 1;
}
100% {
opacity: 0.35;
}
}