Добавление значения прогресса, встроенного в предварительный загрузчик материализации линейного определения

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>

Мое намерение заключается в том, чтобы на самом деле показать количество шагов, выполненных из общего количества шагов (в основном, шаг выполнения), но я не нашел никакой спецификации в Руководстве по проектированию материалов.И даже не текст рядом с прогресс-баром.Пропускает ли в Руководстве по проектированию материалов текстовое представление о прогрессе ??

Answer 1

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>

Answer 2

Упс! это было глупо с помощью сетки. Я попробовал, но сделал ошибку. В любом случае для справки, я добавляю код, который работал для меня.

        <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>

Прилагается результат: