在此运行 完全在你的浏览器里运行，不上传、不登录
进度条生成
调出一条 CSS 进度条，一次粘贴带走 HTML 与 CSS 代码。
预览
生成的是纯 HTML 与 CSS 片段，只含两组 keyframes，不依赖框架和外部样式表。
怎么用
- 设置宽度、高度与圆角，单位都是像素。圆角会被限制在高度的一半以内，避免出现两端被挤扁的形状。
- 选择前景色与轨道色。
- 选择动画：无、条纹流动，或让填充块明暗交替的脉冲。
- 拖动填充百分比，可以在 0 到 100 之间实时预览。
- 点 Copy 复制代码，或点 Download 存成 HTML 文件。
常见用法
- 上传与导入界面 —— 条纹流动能明确表达「还在跑」。
- 仪表盘与配额条 —— 复制两条不同宽度的条，分别显示存储或预算占用。
- 原型稿 —— 直接把真实标签贴进静态页，比贴一张进度条截图有用得多。
- 新手引导清单 —— 用进度条显示完成情况，每完成一步更新一次。
常见问题
问：这段代码需要引库或外部样式表吗？ 答：不需要。只有两个 div、一个 style 块，选了动画时多一条 keyframes，可以直接挪进你自己的 CSS。
问：为什么圆角比我输入的数字小？ 答：圆角超过高度的一半会让条两端变形，所以会被限制在高度的一半以内。
问：能用来显示真实进度吗？
答：可以。在你的代码里改 .pb-fill 的宽度即可，其他都不用动。
问：条纹动画会不会很耗性能？
答：它只动一个元素的 background-position，浏览器合成这个属性的开销很低，动画期间也不跑任何 JavaScript。
你的数据留在这台设备上
进度条生成 完全在本地运行。你粘贴或拖入的一切都由你自己的浏览器处理，不会被传走。我们的服务器不保存任何东西——关掉标签页就没了。
你输入的内容不会发往服务器、不被记录，也不用于分析统计。首次加载之后即使断网，这个页面照样能用。