html - 只有 html 和 css 的进度条

Question

我正在尝试仅使用 html 和 css 创建进度条，但如果进度条发生变化，我无法使图像随之移动。例如，如果我将它设置为 25%、50%、75%，我希望在进度范围的末尾有一个点。

这是我的 HTML 代码:

<div class="progress">
  <div class="progress-bar">
    <img src="http://placehold.it/10x10">
  </div>
</div>

这是我的 CSS:

.progress {
  height:2px;
  width:300px;
  background-color: gray;
  position: relative;
}

.progress-bar {
  height:2px;
  width:20%;
  position: absolute;
  background-color: red;
}

.progress-bar img {
  position: absolute;  
}

我哪里弄错了？

Answer 1

DEMO

.progress {
  height:2px;
  width:300px;
  background-color: gray;
  position: relative;
}

.progress-bar {
  height:2px;
  width:40%;
  position: absolute;
  background-color: red;
}

.progress-bar img {
  position: absolute;
  left: 100%:
}

使图像成为left:100%