如何在进度条百分比中添加菱形标记？

Question

我想在下面添加菱形标记以指示百分比。

我无法添加。由于进度条的颜色也应该更改，例如，如果进度条的颜色为70％，则应为绿色，其余的30％应为红色。

<style type="text/css">
    .progress-wrapper {
      background: white;
      width: 100%;
      height: 18px;
      text-align: center;
      position: relative;
      overflow: hidden;
    }

    .progress {
      height: 100%;
      width: 60%;
      position: absolute;
      left: 0px;
      top: 0px;
      background: #63ed63;
    }

    .progress-label {
      position: absolute;
      z-index: 1;
    }

  </style>

  <div class="progress-wrapper"><div class="progress" style="width:80%"></div><label class="progress-label">80 per cent<label></div>

Answer 1

这是使用setInterval的非常基本的版本：

var bar = document.getElementById("bar");
var diamond = document.getElementById("diamond-wrapper");

function init() {
  var loop = setInterval(frame, 15);
  var percentage = 0;

  function frame() {
    if (percentage >= 100) {
      clearInterval(loop);
    } else {
      percentage++;
      updateProgressDOM(percentage);
    }
  }
}

function onProgressInputChange(event) {
  var percentage = event.currentTarget.value;
  percentage = percentage < 0 ? 0 : percentage > 100 ? 100 : percentage;
  updateProgressDOM(percentage);
}

function updateProgressDOM(percentage) {
  bar.style.width = percentage + '%';
  document.querySelector('.bar-text').innerHTML = percentage * 1 + '%';
}

.progress {
  width: 100%;
  position: relative;
  background-color: red;
}

.bar {
  position: relative;
  width: 0%;
  height: 20px;
  background-color: green;
  text-align: center;
  line-height: 20px;
  color: black;
}

.bar-text {
  position: absolute;
  top: 0;
  width: 100%;
  height: 20px;
  text-align: center;
  line-height: 20px;
  color: black;
}

#diamond-wrapper {
  position: absolute;
  top: 0;
  right: -10px;
}

.diamond {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: lightblue;
  position: relative;
  top: -10px;
}

.diamond:after {
  content: '';
  position: absolute;
  left: -10px;
  top: 10px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-top-color: lightblue;
}

input {
  width: 200px;
}

<div class="progress" id="progress">
  <div class="bar" id="bar">
    <div id="diamond-wrapper">
      <div class="diamond"></div>
    </div>
  </div>
  <div class="bar-text"></div>
</div>

<br>
<button onclick="init()">Init progress</button>
<br>
<br>
<input min="0" max="100" placeholder="progress value" type="number" onChange="onProgressInputChange(event)">