不确定进度指示

本词条尚无可操作示例；插画为编辑示意。产品中仍需验证：循环动画在启用减弱动态效果时是否降级为静态但仍可辨识的状态，是否存在独立于动画的文字或语义状态可被读屏播报，以及等待超过约10秒时是否补充了说明或取消入口来维持用户的方向感。

{
  "states": [
    "idle",
    "indeterminate",
    "success",
    "error"
  ],
  "a11y": [
    "容器标记为忙碌状态，并提供独立于动画的文字状态，避免只靠视觉动画传达信息",
    "避免让读屏因动画本身而被反复、无意义地打断播报"
  ],
  "motion": "默认循环旋转或循环滚动动画；启用减少动态效果时改为静态但仍可辨识的处理中样式"
}

{
  "id": "indeterminate-progress",
  "type": "micro",
  "name": {
    "zh": "不确定进度指示",
    "en": "Indeterminate Progress Indicator"
  },
  "aliases": [
    "Spinner",
    "Loading Indicator",
    "加载动画"
  ],
  "granularity": "state",
  "intents": [
    "wait-for-content"
  ],
  "tags": [
    "加载中",
    "未知进度",
    "旋转图标",
    "循环动画",
    "不确定"
  ],
  "definition": "当剩余时间或已完成比例无法得知时，用持续旋转的图标或循环滚动的进度条表示系统仍在处理，而不报告具体完成了多少。",
  "boundary": "不确定进度指示只回答“系统还在工作吗”，不量化完成比例或剩余时间；一旦拿到可靠的已完成量和总量，就应换成确定进度条，二者不能互相替代，也不能用旋转图标掩盖本可量化的进度。骨架屏用于内容结构已知、只是在等待该结构被填充的场合；不确定进度指示则用于完成比例本身不可知，或等待发生在整个界面而非某块已知结构上的场合。",
  "signature": [
    "旋转图标或循环滚动的进度条持续播放动画，不显示数字或百分比",
    "只传达“正在处理”，动画本身不对应任何可计算的完成量",
    "处理结束后立即替换为结果、内容或错误提示，不继续停留"
  ],
  "when": [
    "系统无法获得可靠的已完成量或总量",
    "预计等待超过约1秒，需要说明系统仍在响应而非卡死",
    "预计等待可能超过约10秒，需配合文字说明或可取消操作帮助用户保持方向感"
  ],
  "when_not": [
    "已经拿到真实的已完成量和总量，却仍用更含糊的旋转图标而不换成确定进度条",
    "用匀速填满或随时间递增的动画冒充真实进度，让用户误以为看到了百分比",
    "内容结构已知，只是在等待该结构被填充（应使用骨架屏）"
  ],
  "tradeoff": "旋转或循环动画实现简单，也不会给出虚假的精确感，但等待超过约10秒后用户容易失去耐心和方向感，仍需辅以文字说明或取消入口，不能只靠动画本身撑住等待体验。",
  "comparison": {
    "focus": "告诉用户系统仍在处理，但不说明处理了多少",
    "mechanism": "循环播放、不对应数值的旋转图标或进度条动画",
    "cost": "无法传达剩余时间，长等待仍需额外的文字说明或取消机制"
  },
  "sources": [
    {
      "id": "nng-progress-indicators",
      "title": "Nielsen Norman Group · Progress Indicators Make a Slow System Less Insufferable",
      "url": "https://www.nngroup.com/articles/progress-indicators/",
      "claim": "该文建议将循环的不确定指示器留给约2至10秒的等待，10秒以上的等待改用能显示完成比例的确定进度指示器。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/progress-indicators/",
        "status": "available",
        "checkedAt": "2026-09-16T05:46:58.176Z",
        "jobId": "spn2-9f1cb6ee0ec1afcc2efcbc9c16a74dd503faf511",
        "url": "https://web.archive.org/web/20260916054722/https://www.nngroup.com/articles/progress-indicators/",
        "timestamp": "20260916054722"
      }
    },
    {
      "id": "nng-response-times",
      "title": "Nielsen Norman Group · Response Times: The 3 Important Limits",
      "url": "https://www.nngroup.com/articles/response-times-3-important-limits/",
      "claim": "该文给出0.1秒、1秒、10秒三个响应时间阈值：约1秒内用户的思路不会被打断，超过约10秒用户便难以维持注意力，需要进度反馈和可中断的方式。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.nngroup.com/articles/response-times-3-important-limits/",
        "status": "available",
        "checkedAt": "2026-09-16T03:50:36.309Z",
        "jobId": "spn2-a445b35eeb0d266caa0107c5f3694ef90bec60e8",
        "url": "https://web.archive.org/web/20260916035201/https://www.nngroup.com/articles/response-times-3-important-limits/",
        "timestamp": "20260916035201"
      }
    },
    {
      "id": "mdn-progress-element",
      "title": "MDN · <progress>",
      "url": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress",
      "claim": "MDN 说明省略 value 属性时 progress 元素即为不确定状态，表示活动正在进行但不清楚预计耗时。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress",
        "status": "available",
        "checkedAt": "2026-09-16T04:07:05.492Z",
        "jobId": "spn2-eda5b33b36bb07caa933987d49748602f928cb5f",
        "url": "https://web.archive.org/web/20260916040819/https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/progress",
        "timestamp": "20260916040819"
      }
    },
    {
      "id": "wcag22-pause-stop-hide",
      "title": "W3C WAI · Understanding SC 2.2.2 Pause, Stop, Hide",
      "url": "https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html",
      "claim": "该准则要求与其他内容并存、自动开始且持续超过5秒的动态内容提供暂停、停止或隐藏的方式；文中以下载时的“加载中”动画为例，说明若动画未与其他可交互内容并存，可视为本质性动效而不必提供控件。",
      "checkedAt": "2026-09-15",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html",
        "status": "pending",
        "checkedAt": "2026-09-16T04:07:05.881Z",
        "error": "status-request-failed",
        "jobId": "spn2-f87881b95ff0174bd8037945300fdad38de222d4"
      }
    }
  ],
  "relations": [
    {
      "target": "determinate-progress",
      "kind": "alternative",
      "condition": "选择如何呈现等待反馈",
      "reason": "有可靠的已完成量与总量时应改用确定进度条；不确定进度指示不能替代它去暗示精确进度，二者按量化能力二选一。",
      "basis": "editorial"
    },
    {
      "target": "skeleton",
      "kind": "alternative",
      "condition": "决定等待期间展示什么",
      "reason": "内容结构已知、只是等待被填充时用骨架屏占位；内容结构未知或等待覆盖整个界面时才用不确定进度指示。",
      "basis": "editorial"
    },
    {
      "target": "status-message",
      "kind": "composes_with",
      "condition": "处理结束或失败",
      "reason": "不确定进度指示只表示过程仍在进行，结束后的结果、错误或下一步需要交给状态消息报告。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "无法获得真实的已完成量或总量",
      "instruction": "不要显示编造的百分比，也不要用匀速或递增的动画让不确定进度看起来像是在精确计量。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "启用减少动态效果",
      "instruction": "循环旋转或滚动动画需降级为静态但仍可辨识的“处理中”样式，并保留独立于动画的文字状态说明。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "等待可能超过约10秒",
      "instruction": "补充文字说明或提供可取消操作，帮助用户保持方向感，不能只依赖循环动画本身。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "requirements": [],
  "behavior": {
    "states": [
      "idle",
      "indeterminate",
      "success",
      "error"
    ],
    "a11y": [
      "容器标记为忙碌状态，并提供独立于动画的文字状态，避免只靠视觉动画传达信息",
      "避免让读屏因动画本身而被反复、无意义地打断播报"
    ],
    "motion": "默认循环旋转或循环滚动动画；启用减少动态效果时改为静态但仍可辨识的处理中样式"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意。产品中仍需验证：循环动画在启用减弱动态效果时是否降级为静态但仍可辨识的状态，是否存在独立于动画的文字或语义状态可被读屏播报，以及等待超过约10秒时是否补充了说明或取消入口来维持用户的方向感。",
  "image": {
    "src": "/images/indeterminate-progress.webp",
    "alt": "虚构的 FIELDNOTES 面板上，一个圆形旋转图标和一条循环滚动的不确定进度条并排出现，看不到任何百分比数字，下方内容区域整体变暗以示等待。"
  },
  "searchTerms": [
    "loading",
    "unknown progress",
    "spinner",
    "looping animation",
    "indeterminate"
  ]
}