<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="board"> <ul class="nav nav-tabs"> <div class="liner"></div> <li rel-index="0" class="active"> <a href="#step-1" class="btn" aria-controls="step-1" role="tab" data-toggle="tab"> <span><i class="glyphicon glyphicon-user"></i></span> </a> </li> <li rel-index="1"> <a href="#step-2" class="btn disabled" aria-controls="step-2" role="tab" data-toggle="tab"> <span><i class="glyphicon glyphicon-book"></i></span> </a> </li> <li rel-index="2"> <a href="#step-3" class="btn disabled" aria-controls="step-3" role="tab" data-toggle="tab"> <span><i class="glyphicon glyphicon-plus"></i></span> </a> </li> <li rel-index="3"> <a href="#step-4" class="btn disabled" aria-controls="step-4" role="tab" data-toggle="tab"> <span><i class="glyphicon glyphicon-ok"></i></span> </a> </li> </ul> </div> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="step-1"> <div class="col-md-12"> <h3>Dados do/a Professor/a</h3> <div class="col-md-6"> <div class="form-group"> <label class="control-label">Disciplina</label> <input maxlength="100" type="text" required="required" class="form-control" placeholder="Enter Name" /> </div> </div> <button id="step-1-next" class="btn btn-lg btn-primary nextBtn pull-right">Next</button> </div> </div> <div role="tabpanel" class="tab-pane" id="step-2"> <div class="col-md-12"> <button id="step-2-next" class="btn btn-lg btn-primary nextBtn pull-right">Next</button> </div> </div> <div role="tabpanel" class="tab-pane" id="step-3"> <div class="col-md-12"> <button id="step-3-next" class="btn btn-lg btn-primary nextBtn pull-right">Next</button> </div> </div> <div role="tabpanel" class="tab-pane" id="step-4"> <div class="col-md-12"> <button id="step-4-next" class="btn btn-lg btn-primary pull-right">Continue</button> </div> </div> </div> </div> </div>

.board { width: 100%; height: auto; margin: 20px auto; background: #ffffff; border-radius: 8px 8px 0 0; } .board .nav-tabs { position: relative; margin: 10px auto; margin-bottom: 0; box-sizing: border-box; } .liner { height: 4px; background: #ddd; position: absolute; width: 80%; margin: 0 auto; left: 0; right: 0; top: 50%; z-index: 1; } .nav-tabs > li { width: 25%; } .nav-tabs > li:after { content: " "; position: absolute; opacity: 0; margin: 0 auto; bottom: 0px; border: 10px solid transparent; border-bottom-color: #aaa; transition: left 1s; } .nav-tabs > li.active:after { left: calc(50% - 10px); opacity: 1; } .nav-tabs > li[rel-index="-1"]:after { left: calc(50% + 100% - 10px); } .nav-tabs > li[rel-index="-2"]:after { left: calc(50% + 200% - 10px); } .nav-tabs > li[rel-index="-3"]:after { left: calc(50% + 300% - 10px); } .nav-tabs > li[rel-index="1"]:after { left: calc(50% - 100% - 10px); } .nav-tabs > li[rel-index="2"]:after { left: calc(50% - 200% - 10px); } .nav-tabs > li[rel-index="3"]:after { left: calc(50% - 300% - 10px); } .nav-tabs > li a { width: 70px; height: 70px; line-height: 70px; margin: 20px auto; border-radius: 100%; padding: 0; } .nav-tabs > li a:hover{ background: transparent; } .nav-tabs > li span { width: 70px; height: 70px; line-height: 70px; display: inline-block; border-radius: 100px; background: white; z-index: 2; position: absolute; left: 0; text-align: center; font-size: 25px; } .nav-tabs > li:nth-of-type(1) span { color: #3e5e9a; border: 2px solid #3e5e9a; } .nav-tabs > li:nth-of-type(1).active span { color: #fff; background: #3e5e9a; } .nav-tabs > li:nth-of-type(2) span { color: #f1685e; border: 2px solid #f1685e; } .nav-tabs > li:nth-of-type(2).active span { color: #fff; background: #f1685e; } .nav-tabs > li:nth-of-type(3) span { color: #febe29; border: 2px solid #febe29; } .nav-tabs > li:nth-of-type(3).active span { color: #fff; background: #febe29; } .nav-tabs > li:nth-of-type(4) span { color: #25c225; border: 2px solid #25c225; } .nav-tabs > li:nth-of-type(4).active span { color: #fff; background: #25c225; } .nav-tabs > li > a.disabled { opacity: 1; } .nav-tabs > li > a.disabled span { border-color: #ddd; color: #aaa; } div#step-1 { background: #fff; } div[role="tabpanel"]:after { content: ""; display: block; clear: both;

$(function() { // Nav Tab stuff $('.nav-tabs > li > a').click(function() { if($(this).hasClass('disabled')) { return false; } else { var linkIndex = $(this).parent().index() - 1; $('.nav-tabs > li').each(function(index, item) { $(this).attr('rel-index', index - linkIndex); }); } }); $('#step-1-next').click(function() { // Check values here var isValid = true; if(isValid) { $('.nav-tabs > li:nth-of-type(2) > a').removeClass('disabled').click(); } }); $('#step-2-next').click(function() { // Check values here var isValid = true; if(isValid) { $('.nav-tabs > li:nth-of-type(3) > a').removeClass('disabled').click(); } }); $('#step-3-next').click(function() { // Check values here var isValid = true; if(isValid) { $('.nav-tabs > li:nth-of-type(4) > a').removeClass('disabled').click(); } }); });