Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
  

    <form action="#" method="post">

        <div class="container">
            <br><br><br><br>
            <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-3">

                <label for="select1" class="control-label">
                    <select id="select1" class="form-control input-md">
                        <option>1</option>
                        <option>2</option>
                    </select>
                </label>

                <br><br>

                <label for="select2" class="control-label">
                    <select id="select2" class="form-control input-md">
                        <option>1</option>
                        <option>2</option>
                    </select>
                </label>

                <br><br>

                </div>
                </div>
        </div>
    </form>

        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-9">
                <div class="row">
                    <div class="col-md-9">
                        <div class="progress progress-striped active">
                        <div class="progress-bar" role="progressbar" aria-valuenow="0" id="progress"
                             aria-valuemin="0" aria-valuemax="100">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS

/* BARRA  DE PROGRESSO */

    .tasks{
        background-color: #F6F8F8;
        padding: 10px;
        border-radius: 5px;
        margin-top: 10px;
    }
    .tasks span{
        font-weight: bold;
    }
    .tasks input{
        display: block;
        margin: 0 auto;
        margin-top: 10px;
    }
    .tasks a{
        color: #000;
        text-decoration: none;
        border:none;
    }
    .tasks a:hover{
        border-bottom: dashed 1px #0088cc;
    }
    .tasks label{
        display: block;
        text-align: center;
    }

JavaScript

$("select").one('change', function() {
            var totalSelect = $('select').length;
            console.log(totalSelect);
            var atual = document.getElementById('progress').getAttribute('aria-valuenow');
            console.log(atual);
            if (atual == 0) {
                var percentual = 100 / totalSelect;
            console.log(percentual);
                $('.progress-bar').css('width', percentual + '%').attr('aria-valuenow', percentual);
            }
            else {
                percentual = (100 / totalSelect) + atual;
               $('.progress-bar').css('width', percentual + '%').attr('aria-valuenow', percentual);
        }
        });