OTS Progress Bar Test

by James

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<div class="container">
        <div class="progress-bar-wrapper">
            <!--<div class="circle">put circle here</div>-->
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <!--<div class="circle">put circle here</div>-->
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <div class="progress-square"></div>
            <!--<div class="circle">put circle here</div>-->
        </div>
    </div>

CSS

.progress-bar-wrapper {
    margin: 10px;
    margin-top: 50px;
    width: 100%;
    float: left;
}
.progress-square {
    background-color: gainsboro;
    float: left;
    height: 20px;
    width: 10%;
    border-right: 1px solid #000;
}

JavaScript

$(function () {

    $(".progress-square:lt(1)").animate({
        backgroundColor: "#FABF03"
    }, 500, function () {
        $(".progress-square:lt(2)").animate({
            backgroundColor: "#FABF03"
        }, 500, function () {
            $(".progress-square:lt(3)").animate({
                backgroundColor: "#FABF03"
            }, 500);
        });
    });

});