进度与状态

运行中状态使用脉冲点，加载使用滑动条或 Spinner，骨架屏使用 1.4s 明暗扫光。流水线按步骤显示完成、进行中与等待三态。

返回组件库
11 · STATUS · 进度与状态
Loading Bar · Pulse Dot · Spinner
运行中
加载中...
Pipeline 流水线
✓ 数据采集
✓ 清洗转换
◉ 质量校验
○ 标准映射
○ 入库发布
Skeleton 骨架屏
Empty State 空状态
暂无数据
当前筛选条件下没有匹配的记录，请调整筛选条件或新增数据。
<section id="status" class="section">
    <div class="section-title">11 · STATUS · 进度与状态</div>

    <div class="demo-sub">Loading Bar · Pulse Dot · Spinner</div>
    <div class="demo-box">
      <div class="flex items-center gap-8 mb-6">
        <div class="flex items-center"><span class="pulse-dot"></span><span class="text-[13px] text-[#15803D] font-medium">运行中</span></div>
        <div class="flex items-center gap-2"><span class="spinner"></span><span class="text-[13px] text-ink-600">加载中...</span></div>
      </div>
      <div class="loading-bar mb-6"></div>
      <div class="demo-sub mt-6">Pipeline 流水线</div>
      <div class="pipeline">
        <div class="pl-step done">✓ 数据采集</div>
        <div class="pl-step done">✓ 清洗转换</div>
        <div class="pl-step active">◉ 质量校验</div>
        <div class="pl-step">○ 标准映射</div>
        <div class="pl-step">○ 入库发布</div>
      </div>
    </div>

    <div class="demo-sub">Skeleton 骨架屏</div>
    <div class="demo-box">
      <div class="flex gap-4 items-start">
        <div class="skeleton" style="width:40px;height:40px;border-radius:50%;flex-shrink:0"></div>
        <div class="flex-1 space-y-3">
          <div class="skeleton" style="height:14px;width:40%"></div>
          <div class="skeleton" style="height:14px;width:80%"></div>
          <div class="skeleton" style="height:14px;width:60%"></div>
        </div>
      </div>
    </div>

    <div class="demo-sub">Empty State 空状态</div>
    <div class="demo-box">
      <div class="empty-state">
        <svg class="empty-state__illustration" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160" fill="none" role="img" aria-label="暂无数据">
          <circle cx="80" cy="78" r="58" fill="#F0F7F8"/>
          <path d="M51 66 60 50h40l9 16v35a5 5 0 0 1-5 5H56a5 5 0 0 1-5-5V66Z" fill="#FFFFFF" stroke="#185058" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M51 78h17l4 8h16l4-8h17" stroke="#185058" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M67 60h26M71 68h18" stroke="#B0D6DB" stroke-width="2.5" stroke-linecap="round"/>
        </svg>
        <div class="text-[15px] font-semibold text-ink-600 mb-1">暂无数据</div>
        <div class="text-[13px] text-ink-400 max-w-xs">当前筛选条件下没有匹配的记录，请调整筛选条件或新增数据。</div>
        <button class="mt-4 px-4 py-2 text-[13px] border border-dashed border-ink-300 text-ink-700 rounded hover:border-cdx-700 hover:text-cdx-700">+ 新增记录</button>
      </div>
    </div>
  </section>

安装

在页面中引入组件样式与 Tailwind 配置即可。组件样式只包含组件本身，不包含站点外壳。

<link rel="stylesheet" href="design-system/assets/design-system.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/tokens/tailwind.config.js"></script>

使用方式

在 Code 标签页复制完整标记，替换其中的文案与数据即可。颜色、字号、圆角与阴影一律引用 tokens/design-tokens.json 中的 token，不要写入未定义的颜色值。

组件在浅色主题下设计；若页面启用暗色模式，请先用 token 覆盖背景与文字色，再复用组件结构。

设计规范

完整的尺寸、状态与反模式说明见 DESIGN.md。开发完成后请按 §28 检查清单逐项核对。