CSS3 Progress Bar - use span to define amount of progress

Question

I'm working on making a progress bar for this project i'm working on and i've half worked it out but now I've hit a wall that i can't seem to work out.

The problem I've got is that the child div doesn't dictate the parent div's width. (so the span doesn't tell progressbar that it should be 60% wide.)

Live demo can be found here - http://codepen.io/anon/pen/BoGvvL

<div class="progress-container">
    <div class="progressbar">
        <span style="width:60%"></span>
    </div>
</div>

CSS

* {
  box-sizing:border-box;
}

.progress-container {
    width:150px;
    margin:0 auto;
    background:#CDCDCD;
    height:30px;
    border-radius:8px;
    padding:3px 5px;
}
.progressbar {
    height: 24px;
    width:0%;
  max-width:100%;
    border-radius:8px;
    background: -webkit-linear-gradient(left, #f63a0f, #f2d31b, #86e01e); 
    background: -o-linear-gradient(right, #f63a0f, #f2d31b, #86e01e); 
    background: -moz-linear-gradient(right, #f63a0f, #f2d31b, #86e01e); 
    background: linear-gradient(to right, #f63a0f, #f2d31b, #86e01e);  
}

Could someone direct me in the right way please?

Thanks in advance.

Answer 1

Any size in percent within a container will make the element with that size that percent of it's parent (given position: relative and probably some other edge cases I'm forgetting).

To use your example:

<div class="progress-container">
    <div class="progressbar">
        <span style="width:60%"></span>
    </div>
</div>

The span will be 60% of .progressbar . This should be obvious simply by the definition of "percent" - it's "some amount of all (specifically 100, which we've collectively agreed is 'all')" or in your specific case: "Six tenths of the width".

What's stopping you from putting width: 60% on the .progressbar element? I did that in your CodePen and it worked wonderfully.

Example:

<div class="progress-container">
  <div class="progressbar" style="width: 60%">
  </div>
</div>

Answer 2

You can also view the following resource on progress bars: https://css-tricks.com/css3-progress-bars/ . This can give you details for what works with progress bars and some templates if you're interested.

To use the code that you've got you can use the following as an alternative (live-code here: http://codepen.io/anon/pen/RWqEXW#0 )

HTML:

<div class="progress-container">
  <span class="progressbar" style="width:60%">
  </span>
</div>

CSS:

* {
  box-sizing: border-box;
}

.progress-container {
  position: relative;
  width: 150px;
  margin: 0 auto;
  background: #CDCDCD;
  height: 30px;
  border-radius: 8px;
  padding: 3px 5px;
}

.progressbar {
  position: absolute;
  height: 24px;
  max-width: 100%;
  border-radius: 8px;
  background: -webkit-linear-gradient(left, #f63a0f, #f2d31b, #86e01e);
  background: -o-linear-gradient(right, #f63a0f, #f2d31b, #86e01e);
  background: -moz-linear-gradient(right, #f63a0f, #f2d31b, #86e01e);
  background: linear-gradient(to right, #f63a0f, #f2d31b, #86e01e);
}

Note the insertion of position attributes and removal of the "width: 0%" in progressbar.

Good Luck!

Answer 3

You have several problems in your code.

First of all the span doesn't tell the progressbar it's 60%, because .progressbar have a width of 0( 60% X 0 = 0 ).

You should add display:block to the span , and also specify the height.

I edited your code and make it work in the way you expect. Here is a code pen: https://codepen.io/anon/pen/YyRBVW

Answer 4

You need to change the display property of the span element to block .

Your .progressbar selector should be large 100% and have no other styles applied. Use .progressbar span instead

SPAN elements are inline elements and you cannot assign them any size!

So, if you try something like that... probably it works!

 function updateProgress() { var val = document.querySelector('.val').value; var el = document.querySelector('.progressbar span'); el.style.width = val + '%'; el.innerText = val + '%'; }; 

 .progressbar { background: red; width: 100%; font-size: 16px; } .progressbar span { display: block; text-align: center; color: #fff; transition: 300ms width linear; line-height: 2em; background: green; max-width: 100%; } 

 <div style="padding: 1em 0;"><input class="val" max="100" type="number" value="10" onchange="updateProgress()"/></div> <div class="progressbar"> <span style="width: 10%;">10%</span> </div>