CSS Vertical Progress Bar

Question

Vertical Progress Bar

---

The proper styling of this bar requires:

• the progress bar must be covered by an element holding a numbe

Answer 1

Challenge accepted!

I took your fiddle and created this from it. It's a very simple demonstration of what you can do with it. You click the "Click me and it goes from 5px to 200px. Of course you can make it so that it increments by a certain number everytime. This is the just of it though. I just posted on here some of the changes I made, the full code is on the jsfiddle

Update: this one goes up by 5px everytime you click it. Of course you'd need to tell it went to stop, otherwise it'd go on forever.

<div class="container">
        <div class="attendance">
            <p class="title">ATTENDANCE</p>
            <div class="attendance-bar">                
                <div class="attendance-level">
                    <div class="bar-1"></div>
                    <div class="bar-2"></div>
                    <div class="bar-3"></div>
                    <div class="bar-4"></div>
                    <div class="bar-5"></div>
                    <div class="bar-6"></div>
                    <div class="bar-7"></div>
                    <div class="bar-8"></div>
                    <div class="bar-9"></div>
                </div>
                <div class="attendance-cage-css"></div>
            </div>
        </div>
    </div>
<div id="changeatt" style="top:50px; left: 200px; position: absolute">Click me</div>

CSS

.container{
    width:100px;
    height:350px;
    position: absolute;
}

.attendance-bar{
    float:left;
    width:90%;
    margin:0px 5% 0px 5%;
    height:260px;
    background-color:#2f2f2f;
}

.attendance-cage-css{
    width:80px;
    float:left;
    background-color:#6ae719;
    height:5px;
    position: absolute;
    bottom: 20px;
    z-index: 1;
}

.bar-1,.bar-2,.bar-3,.bar-4,.bar-5,.bar-6,.bar-7,.bar-8,.bar-9{
    float:left;
    width:100%;
    background-color:#1f1f1f;
    height:10px;
    z-index: 9999;
}

.attendance-level{
    float:left;
    height:100px;
    width:80px;
    z-index: 9999;
    position: absolute;
    top:60px;
}

JQuery

$('#changeatt').click(function(){
    $('.attendance-cage-css').css('height', '200px');
});

Update If you want a max height, I would recommend something like below. It will check to make sure the height of the progress bar does not exceed that of the progress bar container.

if($('.attendance-cage-css').height() < $('.attendance-bar').height()){
    $('.attendance-cage-css').css('height', $('.attendance-cage-css').height() + 5);
}

Note: If you want the bar to reach max height, you must make the height of the container a multiple of which you are increasing the progress bar. For example, if you are increasing the bar by 5px then the height of the container should be 260px, 265px, etc.