How to make a progress bar with image

Question

I'm going to make a progress bar. When it's 0%, you can't see anything. From 1%, I would like to put a flag on the progress bar and let you know how far it has progressed. At 100 percent, this flag disappears. This flag is in image form and I don't know how to code it. Progress is received in JavaScript. Should I write position:relative, position:absolute in the div container?

Welcome to stack overflow, Can you please add some code ? what you have tried ? — Sameer, May 13 '20 at 02:49
I tried this. But I couldn't get the effect I wanted. https://www.w3schools.com/howto/howto_js_progressbar.asp / https://stackoverflow.com/questions/18981909/how-to-show-a-running-progress-bar-while-page-is-loading — eujin, May 13 '20 at 02:51

score 0 · Accepted Answer · answered May 13 '20 at 02:51

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

Here's the gist. Style as you please.

How to make a progress bar with image

1 Answers1