"Linear Stepper"
Bootstrap 3.0.0 Snippet by xrozix

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html> <html> <body> <div class="col-sm-4 col-sm-offset-3" style="margin-top:50px;padding:0px;"> <div> <p>1) Load data into <b>variable step</b></p> <div> <pre> var step = [ ["13/may","En Espera"], ["17/may","Buscando"], ["20/may","En depósito"], ["23/may","En reparto"], ["25/may","Entregado"] ]; </pre> </div> <p>2) Set up your step ==> <b>setStep(number);</b> </p> <div class="frame custom"> <div class="box"></div> </div> <p style="margin-top: 60px;">3) Magic!!! Select step</p> <div> <span class="button btn-min">-</span> <input type="text" min="0" max="5" value="1"/> <span class="button btn-max">+</span> </div> </div> </div> </body> </html>
/* ---- NO USE */ .button{ cursor:pointer;padding: 5px 10px 7px 10px;border-radius:2px;background:silver; } input{ width:50px;text-align:center;margin-left:-4px;margin-right:-4px; } /* ---- USE ---*/ .custom{ margin-top:60px;padding:0; } .frame{ display:flex;align-items:center; } .line{width:100%;border:3px solid #dadada;border-radius:5%;} .box{ height:16px;width: 100%;position: absolute;display: flex; } /* -- FIRST --*/ .step-f{ margin:auto;margin-left:0; } /* -- LAST --*/ .step-l{ margin:auto;margin-right:0;display:flex;flex-direction: column;align-items: flex-end; } /* -- STEP Style--*/ .step{ border-radius:50%;margin:auto;display: flex;flex-direction: column;align-items: center; } .step > div,.step-f > div, .step-l > div{ border-radius:50%;height:15px;width:15px;background:#1bb04a } .step > p:first-of-type, .step-f > p:first-of-type, .step-l > p:first-of-type{ font-size: 10px;padding:0;margin:0;margin-top:-35px;color:#32b85c; } .step > p:last-of-type,.step-f > p:last-of-type, .step-l > p:last-of-type{ padding:0;margin:0;margin-top:25px;font-size: 11px; }
$(document).ready(function(){ //-- USE //-- Init var step = [ ["13/may","En Espera"], ["17/may","Buscando"], ["20/may","En depósito"], ["23/may","En reparto"], ["25/may","Entregado"] ]; var total = step.length; var current = 0; //-- Functions function reset(){ $(".box").empty(); $(".line").remove(); } function setStep(number){ if (number > step.length){ current = step.length; } if (number < 0){ current = 0; } if (number >= 0 && number < step.length){ current = number; } update(); } function update(){ reset(); $.each(step, function(e, value){ add(value[0], value[1], e); }); //-- Redraws circle $(".step").each(function(){ var control = $(this); var left = $(".line").first().css("width").replace("px","") * control.index(); left = left - (parseInt(control.css("width")) /2) ; control.css("position","absolute").css("left",left+ "px"); }); } function add(text1, text2, index ){ var color = "#dadada"; if (index <= current){ color = "#1bb04a"; } if ($(".bookmark").length === 0){ class_ = "step-f"; } if ($(".bookmark").length !== 0){ class_ = "step"; } if ($(".bookmark").length == total-1){ class_ = "step-l"; } $(".box").append('<div class="'+class_+' bookmark"><div style="background:'+color+'"></div><p style="color:'+color+'">'+text1+'</p><p>'+text2+'</p></div>'); if (index != total-1){ color = "#dadada"; if (index < current){ color = "#1bb04a"; } $(".box").parent().append('<div style="border: 3px solid '+color+' !important;" class="line"></div>'); } } //-- Proccess setStep(1); //-- NO USE $(".btn-min").on("click",function(){ var actual = parseInt($("input").val()); if (actual - 1 >= 0){ $("input").val(actual - 1); setStep(actual - 1); } }); $(".btn-max").on("click",function(){ var actual = parseInt($("input").val()); if (actual + 1 < total){ $("input").val(actual + 1); setStep(actual + 1); } }); });

Related: See More


Questions / Comments: