如何将进度值与Materialize线性确定预加载器内联显示？

首先，咱们先搞定进度文本和进度条内联显示的技术实现，然后再聊聊Material Design指南的相关疑问。

一、实现内联进度文本的两种方法 #

方法1：用Flex布局让文本和进度条同行显示 #

这种方法适合把文本放在进度条的右侧（或左侧），保持在同一行且垂直对齐，不会换行：

<div class="container">
  <!-- 用flex容器包裹进度条和文本，确保同行 -->
  <div style="display: flex; align-items: center; margin: 1rem 0;">
    <!-- 进度条占满剩余空间 -->
    <div class="progress" style="flex: 1; margin: 0;">
      <div class="determinate" style="width: 70%"></div>
    </div>
    <!-- 进度文本，和进度条间距可调 -->
    <span style="margin-left: 1rem;">7/10</span>
  </div>
</div>

方法2：将文本嵌入进度条内部 #

如果想让文本直接显示在进度条上（比如右侧），可以用绝对定位实现：

<div class="container">
  <!-- 给progress设置相对定位，作为文本的定位容器 -->
  <div class="progress" style="position: relative; height: 20px;">
    <div class="determinate" style="width: 70%"></div>
    <!-- 绝对定位文本，垂直居中 -->
    <span style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 0.8rem;">7/10</span>
  </div>
</div>

这里调整了progress的高度，确保文本有足够空间显示，同时设置文本颜色为白色避免被进度条遮挡。

二、关于Material Design指南的疑问 #

Material Design并没有取消进度的文本表示，反而非常推荐在合适的场景下结合文本与进度条，比如步骤流程、文件上传、任务进度等场景。

指南中提到，当进度是可量化的（比如百分比、已完成步骤数/总步骤数），添加文本可以为用户提供更精确、直观的进度反馈——尤其是对于视觉障碍用户，或者需要明确知道剩余/已完成数量的场景。只是指南没有单独开辟章节专门讲解“进度条旁加文本”的细节，但这种做法完全符合Material Design的可用性原则，是被允许且鼓励的。

内容的提问来源于stack exchange，提问作者Praveen Rai