Ajax Loader
HTML 
<div class="step-indicator"></div>
1
<div class="step-indicator"></div>
2
<input type="button" value="next"/>
3
<input type="button" value="render"/>
4
 
5
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
CSS 
.step-indicator {
1
.step-indicator {
2
  display: inline;
3
  .step {
4
    width: 100px;
5
    display: inline-block;
6
    position: relative;
7
    vertical-align: top;
8
    margin-right: 2px;
9
  
10
 
11
    //line
12
    &:before{
13
      content: "";
14
      width: 100%;
15
      height: 0px;
16
      border-bottom: 2px dotted #bbb;
17
      position: absolute;
18
      left: 0px;
19
      right: 0px;
20
      top: 6px;
21
    }
22
  
23
    //circle
24
    &:after{
25
      content: "";
26
      width: 12px;
27
      height: 12px;
28
      border-radius: 50%;
29
      background-color: #FD8521;
30
      position: absolute;
31
      left: calc(50% - 6px);
32
      top: 2px;
33
    }
34
    
35
    .text{
36
      padding: 24px 6px;
37
      text-align: center;
38
      color: #515254;
39
      font-family: 'Myriad pro', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', sans-serif;
40
      font-size: 13px;
41
      font-stretch: normal;
42
      font-style: normal;
43
      font-variant: normal;
44
      font-weight: normal;
45
    }
46
    
47
    &.not-completed{
48
      &:after{
49
        background-color: #D4D4D4;
50
      }
51
      .text{
52
        color: #ADADAD;
53
      }
54
    }
55
    
56
    &.current{
57
      &:after{
58
        width: 16px;
59
        height: 16px;
60
        top: 0px;    
61
        left: calc(50% - 8px);
62
      }
63
      .text{
64
        color: #515254;
65
      }
66
    }
67
    
68
    &.current .innerCircle{
69
      width: 10px;
70
      height: 10px;
71
      border-radius: 50%;
72
      background-color: #F1F1F0;
73
      position: absolute;
74
      left: calc(50% - 5px);
75
      top: 3px;
76
      z-index: 1;
77
    }
78
  
79
  
80
    
81
    &:first-child{
82
      &:before{
83
        width: 50%;
84
        left: auto;
85
        right: 0px;
86
      }
87
    }
88
    &:last-child{
89
      &:before{
90
        width: 50%;
91
      }
92
    }
93
  
94
  }
95
}
 
JavaScript 
/**
1
/**
2
 * Main function to demonstrate the component usage
3
 */
4
$(function(){
5
6
  var data = [
7
    "CREATE YOUR ACCOUNT",  
8
    "BILLING DETAILS",  
9
    "CONFIRM PURCHASE",    
10
    "CHOOSE A PLAN"
11
  ];
12
 
13
  var stepIndicator= new StepIndicator(null, data);
14
 
15
  $("input[value=next]").on("click",function(){
16
    stepIndicator.next();
17
  });
18
  $("input[value=render]").on("click",function(){
19
    var steps = [
20
      {text:"CREATE YOUR ACCOUNT",   state: 2},
21
      {text:"BILLING DETAILS",       state: 0},
22
      {text:"CONFIRM PURCHASE",      state: 1},
23
      {text:"CHOOSE A PLAN",         state: 0}
24
    ];
25
    stepIndicator.render(steps);
26
  });
27
 
28
});
29
 
30
 
31
/**
32
 * A statefull StepIndicator component that supports the api:
33
 * next() to complete a step and set the next step as current
34
 * render(steps) to reapply both steps and their states
35
 * @return {[type]} [description]
36
 */
37
var StepIndicator= (function(){
38
39
  var STATES = ["NOT-COMPLETED", "CURRENT", "COMPLETED"];
40
41
  var StepIndicator= function(el, steps){
42
    this.initialize(el, steps);
43
  };
44
 
45
  StepIndicator.prototype= {
46
    /**
47
     * set and render the stepIndicator
48
     * @param  {string} el    a css selector of where we'd like to embed our stepIndicator, defaults to ".step-indicator"
49
     * @param  {Object} steps either an array of string to show as steps, or an array of objects {text:...,state:...}
50
     */
51
    initialize: function(el, steps){
52
      this.$el= $(el || ".step-indicator");
53
      // transform simple text array into array of steps objects
54
      if($.isArray(steps)){
55
        this.steps= [];
56
        for(var i=0; i < steps.length; i++){
57
          this.steps[i]= {text: steps[i], state: (i===0 ? 1:0)};
58
        }
59
      }else{
60
        this.steps= steps;
61
      }
62
    
63
      this.render();
64
    },
65
    /**
66
     * clears the container and rerenders the entire stepIndicator markup
67
     * based on the this.steps object which can be optionally override when passed to this function
68
     * @param  {object} steps [optional] an array of objects {text:...,state:...} to override this.steps
69
     */
70
    render: function(steps){
71
      if(steps){
72
        this.steps= steps;
73
      }
74
      this.$el.empty();
75
      for(var i=0; i < this.steps.length; i++){
76
        var stepData= this.steps[i];
77
      
78
        var stepEl= $("<div>");
79
        stepEl.addClass("step");
80
      
81
        switch(stepData.state) {
82
          case 0:
83
            stepEl.addClass("not-completed");
84
            break;
85
          case 1:
86
            stepEl.addClass("current");
87
            stepEl.append($("<div class=innerCircle></div>"));
88
            break;
89
        }
90
        stepEl.append($("<div class=text>"+stepData.text+"</div>"));
91
        this.$el.append(stepEl);
92
      }
93
    },
94
    /**
95
     * will find the current step mark it as completed and set the next one to current
96
     */
97
    next: function() {
98
      for(var i=0; this.steps.length; i++){
99
        var stepData= this.steps[i];
100
        if(stepData.state === 1){
101
          stepData.state= 2;
102
        
103
          var nextStep= Math.min(i+1, this.steps.length - 1);
104
          this.steps[nextStep].state= 1;
105
          this.render();
106
          return;
107
        }
108
      }
109
    }
110
  };
111
112
  return StepIndicator;
113
})();
 

Step-Indicator

CSSDeck G+