0

I'm trying to create a progress bar using only html and css and I can't make the image to move along if the progress bar changes. For example, if I set it to 25%, 50%, 75%, I want a dot at the end of the progress spectrum.

Here is my HTML Code:

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

And this is my 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;  
}

Where am I getting it wrong?

3
  • 4
    Use the HTML5 progress element: <progress value="70" max="100">70 %</progress>
    – j08691
    May 19, 2014 at 14:29
  • You want the placeholder image at the end of the progress? Or something else.
    – TylerH
    May 19, 2014 at 14:29
  • yes, I want that image at the end of the progress. :)
    – Radu
    May 19, 2014 at 14:37

2 Answers 2

0

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%:
}

Make the image to be left:100%

4
  • I want that image at the end of the progress, not stretched. I'm sorry if I didn't make myself clear.
    – Radu
    May 19, 2014 at 14:36
  • .progress-bar img { position: absolute; left: 100%; } May 19, 2014 at 14:38
  • Thank you sir :D ...if you could modify your answer so I can mark it as the correct one, it would be nice :)
    – Radu
    May 19, 2014 at 14:41
  • Yes, i have modified it :) May 19, 2014 at 14:41
0

I made this one for an old project and it works just fine !

#pourcentage {
    width:100px;
    padding:2px;
    background-color:white;
    text-align:center;
    height: 20px;
}
#indicatorValid {
    background-color: #2ecc71;
    text-align: center;
    color: white;
    height: 20px;
    float: left;
}
#indicatorErreur {
    background-color:#E44C41;
    text-align: center;
    color: white;
    height: 20px;
    float: right;
}

  <div id='pourcentage'>
    <div style='width:50px;' id='indicatorValid'>50 %</div>
    <div style='width:50px;' id='indicatorErreur'>50 %</div>
  </div>

http://jsfiddle.net/53Dnd/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.