将进度值内联添加到 Materialise Linear Determinate Preloader

Question

我正在尝试将进度值与 MaterializeCSS 中的线性预加载器内联。我尝试了很多东西，但没有成功。

<!-- Doesn't show any text at all -->
<div class="container">
    <div class="progress">
        <div class="determinate" style="width: 70%">7/10</div>
    </div>
</div>

<!-- Doesn't show any text at all -->
<div class="container">
    <div class="progress">
        <div class="determinate" style="width: 70%"></div>
        <span>7/10</span>
    </div>
</div>

<!-- Displays the text in new line -->
<div class="container">
    <div class="progress">
        <div class="determinate" style="width: 70%"></div>          
    </div>
    <span class="right">7/10</span>
</div>

我的意图是实际显示总步骤数中完成的步骤数（基本上是一个步骤进度），但我在材料设计指南中没有找到任何规范。甚至没有进度条旁边的文字。 Material Design Guidelines 是否删除了进度的文本表示？？

Answer 1

哎呀！使用网格是一件愚蠢的事情。我确实尝试过，但犯了一个错误。无论如何作为参考，我正在添加对我有用的代码。

        <div class="card-panel">
            <div class="row">
                <h5 class="col s10">Lesson Progress</h5>
                <h5 class="col s2 right-align">3/5</h5>
            </div>
            <div class="progress">
                <div class="determinate" style="width: 60%"></div>
            </div>
        </div>

附上结果：

Answer 2

CSS

.load-bar {
  position: relative;
  margin-top: 20px;
  width: 100%;
  height: 6px;
  background-color: #fdba2c;
}
.bar {
  content: "";
  display: inline;
  position: absolute;
  width: 0;
  height: 100%;
  left: 50%;
  text-align: center;
}
.bar:nth-child(1) {
  background-color: #da4733;
  animation: loading 3s linear infinite;
}
.bar:nth-child(2) {
  background-color: #3b78e7;
  animation: loading 3s linear 1s infinite;
}
.bar:nth-child(3) {
  background-color: #fdba2c;
  animation: loading 3s linear 2s infinite;
}
@keyframes loading {
    from {left: 50%; width: 0;z-index:100;}
    33.3333% {left: 0; width: 100%;z-index: 10;}
    to {left: 0; width: 100%;}
}

<div class="load-bar">
  <div class="bar"></div>
  <div class="bar"></div>
  <div class="bar"></div>
</div>