<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);
}
});
});
