如何制作带有图像的进度条[关闭]答案

【问题标题】：How to make a progress bar with image [closed]如何制作带有图像的进度条[关闭]
【发布时间】：2020-05-13 10:51:42
【问题描述】：

我要做一个进度条。当它为 0% 时，您什么都看不到。从 1% 开始，我想在进度条上放一个标志，让你知道它进展了多远。在 100% 时，此标志消失。这个标志是图像形式的，我不知道如何编码。在 JavaScript 中收到进度。我应该在 div 容器中写position:relative、position:absolute 吗？

【问题讨论】：

欢迎来到堆栈溢出，可以添加一些代码吗？你试过什么？
我试过这个。但是我无法达到我想要的效果。 w3schools.com/howto/howto_js_progressbar.asp / stackoverflow.com/questions/18981909/…

标签： javascript html css

【解决方案1】：

.progressbar {
  width: 100%;
  border: 1px solid black;
  border-radius: 5px;
  height: 24px;
}

.icon {
  width: 24px;
  height: 24px;
  position: absolute;
  right: -12px;
  opacity: .5;
}

.progress {
  width: 50%;
  background-color: green;
  position: relative;
  height: 24px;
}

<div class="progressbar">
  <div class="progress">
    <img class="icon" src="https://loremicon.com/ngon/128/128/811932708408/jpg">
  </div>
</div>

这是要点。随心所欲。

【讨论】：