条纹进度条

斜条纹在填充段里持续流动，一看就知道「还在干活」

全平台通用动效与背景内容区效果

实时预览（拖动参数，立刻看变化）

代码

<div class="track"><div class="fill"></div></div>
<style>
.track { height: 15px; border-radius: 99px; background: #E3E0D8; overflow: hidden; }
.fill { height: 100%; width: 64%; border-radius: 99px;
  background: repeating-linear-gradient(45deg, #141414 0 10px, #3c3a34 10px 20px);
  background-size: 28px 100%; animation: stripes 1.1s linear infinite; }
@keyframes stripes { to { background-position: 28px 0; } }
</style>

<div class="h-[15px] overflow-hidden rounded-full bg-[#E3E0D8]"><div class="h-full w-[64%] animate-[stripes_1.1s_linear_infinite] rounded-full bg-[repeating-linear-gradient(45deg,#141414_0_10px,#3c3a34_10px_20px)] [background-size:28px_100%]"></div></div>
<!-- tailwind.config 补 keyframes stripes: { to: { backgroundPosition: '28px 0' } } -->

export function StripedProgress({ value = 64 }) {
  return (<div style={{ height: 15, borderRadius: 99, background: "#E3E0D8", overflow: "hidden" }}>
    <div style={{ height: "100%", width: value + "%", borderRadius: 99,
      background: "repeating-linear-gradient(45deg,#141414 0 10px,#3c3a34 10px 20px)", backgroundSize: "28px 100%",
      animation: "stripes 1.1s linear infinite" }} />
    <style>{`@keyframes stripes{to{background-position:28px 0}}`}</style></div>);
}

代码片段以 MIT 释出，可自由复制改用。

这个效果是怎么实现的

它是怎么工作的（中文）

填充段的背景是 repeating-linear-gradient 的 45° 斜纹，动画只动 background-position，条纹就像传送带一样走起来。它和普通进度条的分工：确定进度用平滑填充，不确定或想强调「进行中」时上条纹。条纹流动方向要和进度增长方向一致，反了会很别扭。

How it works (English)

The fill's background is a 45° repeating-linear-gradient; animating background-position makes the stripes run like a conveyor. Division of labor: smooth fills for determinate progress, stripes for indeterminate or 'actively processing' states. Stripe flow must match the fill's growth direction — reversed looks wrong immediately.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

配套提示词

条纹进度条 · 提示词待复验 · →