Как добавить текст в центр индикатора выполнения и раскрасить его в зависимости от значения прогресса с помощью CSS?

Question

Есть основной c HTML вопрос. Я написал следующий вопрос:

<div class="low">
  <div class="chart">
    <div class="cover-fill" style="width: 91%"></div>
    <div class="cover-empty" style="width: 9%"></div>
  </div>
</div>

css:

.low .chart { border: 1px solid #C21F39 }
.medium .chart { border: 1px solid #666; }
.high .chart { border: 1px solid rgb(77,146,33) }

.low .cover-fill { background: #C21F39 }
.medium .cover-fill { background: #666; }
.high .cover-fill { background: rgb(77,146,33) }

.cover-fill, .cover-empty {
  display:inline-block;
  height: 15px;
}

.chart {
  line-height: 0;
}

.cover-full {
    border-right: none !important;
}

Я в основном создаю следующую полосу:

I would like to add numbers in the center of the bar itself. The wanted result is:

введите описание изображения здесь

Я пытался использовать тег <p> в диаграмме div, но это не сработало. Какой CSS я должен использовать, чтобы он работал?

Answer 1

Вы можете упростить свой код следующим образом:

.chart {
  border: 1px solid #C21F39;
  height: 15px;
  background-image: linear-gradient(#C21F39, #C21F39);
  background-size: var(--progress) 100%;
  background-repeat: no-repeat;
  text-align: center;
  margin: 10px 0;
  
  /* to center the text horizontally and vertically */
  display:flex;
  justify-content:center;
  align-items:center;
}

<div class="chart" style="--progress:75%">text</div>
<div class="chart" style="--progress:25%">text</div>
<div class="chart" style="--progress:43%">text</div>

Центрировать текст в заполненной области:

.chart {
  border: 1px solid #C21F39;
  height: 15px;
  background-image: linear-gradient(#C21F39, #C21F39);
  background-size: var(--progress) 100%;
  background-repeat: no-repeat;
  margin: 10px 0;
  padding-right: calc(100% - var(--progress));
  color: #fff;
  
  /* to center the text horizontally and vertically */
  display:flex;
  justify-content:center;
  align-items:center;
}

<div class="chart" style="--progress:43%">text</div>
<div class="chart" style="--progress:80%">text</div>
<div class="chart" style="--progress:20%">text</div>

Я использовал hsl() и некоторые математические вычисления, чтобы установить цвет фона в зависимости от прогресса.

.chart {
  border: 1px solid #C21F39;
  height: 15px;
  --p: calc((var(--progress) / 100) * 120); /* some math to calculate hsl. reference https://coderwall.com/p/dvsxwg/smoothly-transition-from-green-to-red */
  background-image: linear-gradient(to right, hsl(calc(120 - var(--p)), 100%, 50%), hsl(calc(120 - var(--p)), 100%, 50%));
  background-size: calc(var(--progress) * 1%) 100%;
  background-repeat: no-repeat;
  margin: 10px 0;
  padding-right: calc(100% - (var(--progress) * 1%));
  color: #000;
  
  /* to center the text horizontally and vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="chart" style="--progress:100">text</div>
<div class="chart" style="--progress:80">text</div>
<div class="chart" style="--progress:20">text</div>
<div class="chart" style="--progress:50">text</div>
<div class="chart" style="--progress:5">text</div>