Progress Tracker

by BoxMan0617

HTML

<div id="project_tracker">
    <div id="project_1">
        <div class="bar">
            <div class="inner-bar shine" style="width: 0%;">50</div>
            <div class="event good" style="left: 0%;"></div>
            <div class="event neutral" style="left: 25%;"></div>
            <div class="event bad" style="left: 50%;"></div>
            <div class="event good" style="left: 100%;"></div>
        </div>
    </div>
</div>

CSS

#project_tracker .bar, #project_tracker .bar .event {
    -webkit-box-shadow: inset 0px 0px 20px -5px #000;
    box-shadow: inset 0px 0px 20px -5px #000;
}

#project_tracker .bar {
    top: 50px;
    position: relative;
    width: 100%;
    height: 20px;
    background: #666666;
    border-radius: 3px;
}

#project_tracker .bar .event {
    position: absolute;
    width: 10px;
    height: 40px;
    top: -50%;
    margin-left: -5px;
    border-radius: 2px;
    cursor: pointer;
}

#project_tracker .bar .good {
    background: #78ea72;
}

#project_tracker .bar .neutral {
    background: #84cbe8;
}

#project_tracker .bar .bad {
    background: #e24141;
}

#project_tracker .bar .inner-bar {
    height: 16px;
    position: relative;
    top: 2px;
    background-color: #34c2e3;  
    -webkit-transition: width .4s ease-in-out;
    -moz-transition: width .4s ease-in-out;
    -ms-transition: width .4s ease-in-out;
    -o-transition: width .4s ease-in-out;
    transition: width .4s ease-in-out; 
    -webkit-background-size: 30px 30px;
	-moz-background-size: 30px 30px;
	background-size: 30px 30px;			
	background-image: -webkit-gradient(linear, left top, right bottom,
						color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
						color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
						color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
						to(transparent));
	background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
						transparent 75%, transparent);
	background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
						transparent 50%, rgba(255, 255,...

JavaScript

var end = $('#project_tracker .inner-bar').text()+'%';
$('#project_tracker .inner-bar').text('');
$('#project_tracker .inner-bar').animate({'width': end}, 5000, 'linear');