Ajax Loader
HTML 
<div class="welcome-button">
1
<div class="welcome-button">
2
  <div class="bt-sl-solid-l down out"></div>
3
  <div class="bt-sl-solid-r down out"></div>
4
  <div class="bt-slider-0 bt-slide-l out"></div>
5
  <div class="bt-slider-1 bt-slide-l out"></div>
6
  <div class="bt-slider-2 bt-slide-l out"></div>
7
  <div class="bt-slider-3 bt-slide-l out"></div>
8
  <div class="bt-slider-4 bt-slide-l out"></div>
9
  <a href="#" class="button out lin-t">
10
    Hover Over Me
11
  </a>
12
</div>
13
 
14
 
15
 
16
<script src='//assets.codepen.io/assets/libs/fullpage/jquery-c152c51c4dda93382a3ae51e8a5ea45d.js'></script>
17
 
 
CSS 
body {
1
body {
2
  background: #222;
3
}
4
 
5
a {
6
  text-decoration: none;
7
  -moz-transition: all 200ms ease-in;
8
  -o-transition: all 200ms ease-in;
9
  -webkit-transition: all 200ms ease-in;
10
  transition: all 200ms ease-in;
11
}
12
 
13
.lin-t {
14
  -moz-transition: all 300ms linear;
15
  -o-transition: all 300ms linear;
16
  -webkit-transition: all 300ms linear;
17
  transition: all 300ms linear;
18
}
19
 
20
.button {
21
  font-family: 'Aldrich', sans-serif;
22
  text-align: center;
23
  padding: 10px 10px;
24
  color: white;
25
  text-transform: uppercase;
26
}
27
 
28
.welcome-button {
29
  position: fixed;
30
  top: 40%;
31
  left: 50%;
32
  margin-left: -78px;
33
  -moz-transition: all 600ms ease-in;
34
  -o-transition: all 600ms ease-in;
35
  -webkit-transition: all 600ms ease-in;
36
  transition: all 600ms ease-in;
37
}
38
.welcome-button a {
39
  line-height: 30px;
40
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
41
  opacity: 1;
42
  -moz-transition: all 600ms ease-in;
43
  -o-transition: all 600ms ease-in;
44
  -webkit-transition: all 600ms ease-in;
45
  transition: all 600ms ease-in;
46
}
47
.welcome-button a.out {
48
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
49
  opacity: 0;
50
}
51
.welcome-button.out {
52
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
53
  opacity: 0;
54
}
55
 
56
[class*='bt-slider-'] {
57
  left: 100%;
58
  position: absolute;
59
  height: 100%;
60
  border-left: 1px solid white;
61
  z-index: 1000;
62
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
63
  opacity: 1;
64
}
65
[class*='bt-slider-'].out {
66
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
67
  opacity: 0;
68
}
69
 
70
.bt-slide-l {
71
  left: 0;
72
}
73
 
74
.bt-slider-0 {
75
  -moz-transition: all 200ms ease-in;
76
  -o-transition: all 200ms ease-in;
77
  -webkit-transition: all 200ms ease-in;
78
  transition: all 200ms ease-in;
79
}
80
 
81
.bt-slider-1 {
82
  -moz-transition: all 800ms ease-in;
83
  -o-transition: all 800ms ease-in;
84
  -webkit-transition: all 800ms ease-in;
85
  transition: all 800ms ease-in;
86
}
87
 
88
.bt-slider-2 {
89
  -moz-transition: all 300ms ease-in;
90
  -o-transition: all 300ms ease-in;
91
  -webkit-transition: all 300ms ease-in;
92
  transition: all 300ms ease-in;
93
}
94
 
95
.bt-slider-3 {
96
  -moz-transition: all 500ms ease-in;
97
  -o-transition: all 500ms ease-in;
98
  -webkit-transition: all 500ms ease-in;
99
  transition: all 500ms ease-in;
100
}
101
 
102
.bt-slider-4 {
103
  -moz-transition: all 1000ms ease-in;
104
  -o-transition: all 1000ms ease-in;
105
  -webkit-transition: all 1000ms ease-in;
106
  transition: all 1000ms ease-in;
107
}
108
 
109
.bt-sl-solid-l {
110
  position: absolute;
111
  left: 0;
112
  height: 100%;
113
  border-left: 2px solid orange;
114
  z-index: 1001;
115
  -moz-transition: all 500ms ease-in-out;
116
  -o-transition: all 500ms ease-in-out;
117
  -webkit-transition: all 500ms ease-in-out;
118
  transition: all 500ms ease-in-out;
119
}
120
.bt-sl-solid-l.out {
121
  left: 50%;
122
}
123
.bt-sl-solid-l.down {
124
  height: 0%;
125
}
126
 
127
.bt-sl-solid-r {
128
  position: absolute;
129
  right: -1px;
130
  height: 100%;
131
  border-left: 2px solid orange;
132
  z-index: 1001;
133
  -moz-transition: all 500ms ease-in-out;
134
  -o-transition: all 500ms ease-in-out;
135
  -webkit-transition: all 500ms ease-in-out;
136
  transition: all 500ms ease-in-out;
137
}
138
.bt-sl-solid-r.out {
139
  right: 50%;
140
}
141
.bt-sl-solid-r.down {
142
  height: 0%;
143
}
 
JavaScript 
//If you like this and wish to use it please give credit where it is due! -Kaigth :)
1
//If you like this and wish to use it please give credit where it is due! -Kaigth :)
2
 
3
//variables
4
var document = window.document,
5
6
    $_window = $( window ),
7
  
8
  timeout,
9
  
10
  isAnimating = false,
11
  slideNum = 0,
12
 
13
    $welcomeBarL = $( ".bt-sl-solid-l" ),
14
    $welcomeBarR = $( ".bt-sl-solid-r" ),
15
    $btSlideActive = $( ".welcome-button" ).find( ".bt-slide-l" ),
16
 
17
    $welcomeBtn = $( ".welcome-button a" );
18
  
19
//------//
20
 
21
//Delegation
22
$welcomeBtn.on( 'mouseenter', function () {
23
    var timeout,
24
        $slidebar = $( '.bt-slider-' + slideNum ),
25
      
26
    animate = function () {
27
    
28
            timeout = setTimeout(function () {
29
                clearTimeout( timeout );
30
 
31
                if ( slideNum === 5 ) {
32
33
                    isAnimating = false;
34
                    slideNum = 0;
35
 
36
                } else {
37
 
38
                    isAnimating = true;
39
                    $slidebar = $( '.bt-slider-' + slideNum );
40
 
41
                    $slidebar.removeClass( 'bt-slide-l' );
42
 
43
                    slideNum++;
44
 
45
                    animate();
46
 
47
                }
48
 
49
            }, 100 );
50
       };
51
 
52
    animate();
53
54
});
55
 
56
$welcomeBtn.on( 'mouseout', function () {
57
    var timeout,
58
          $slidebar = $( '.bt-slider-' + slideNum ),
59
      
60
          animate = function () {
61
62
        timeout = setTimeout(function () {
63
                  clearTimeout( timeout );
64
 
65
                  if ( slideNum === 5 ) {
66
 
67
                      isAnimating = false;
68
                      slideNum = 0;
69
 
70
                  } else {
71
 
72
                      isAnimating = true;
73
                      $slidebar = $( '.bt-slider-' + slideNum );
74
 
75
                      $slidebar.addClass( 'bt-slide-l' );
76
 
77
                      slideNum++;
78
 
79
                      animate();
80
 
81
                  }
82
 
83
              }, 100 );
84
        };
85
 
86
    animate();
87
88
});
89
 
90
$_window.on( "load", function () {
91
 
92
  timeout = setTimeout(function () {
93
              clearTimeout();
94
 
95
              $welcomeBarL.removeClass( "down" );
96
              $welcomeBarR.removeClass( "down" );
97
 
98
          }, 100 );
99
100
          timeout = setTimeout(function () {
101
              clearTimeout();
102
 
103
              $welcomeBarL.removeClass( "out" );
104
              $welcomeBarR.removeClass( "out" );
105
 
106
          }, 400 );
107
 
108
  timeout = setTimeout(function () {
109
              clearTimeout();
110
 
111
              $welcomeBtn.removeClass( "out" );
112
 
113
          }, 800 );
114
 
115
  timeout = setTimeout(function () {
116
              clearTimeout();
117
 
118
              $btSlideActive.removeClass( "out" );
119
 
120
          }, 1000 );
121
 
122
});
 

Line Effect on Mouse Hover

CSSDeck G+