Ajax Loader
HTML 
<div class="item">
1
<div class="item">
2
    <div class="hover">
3
        <div class="laser"></div>
4
    </div>
5
  <div class="click">
6
        <div class="claser"></div>
7
    </div>
8
    <img class="background" src="http://cssdeck.com/uploads/media/items/1/1AE9zJX.png" />
9
</div>
 
CSS 
.item {
1
.item {
2
  position: relative;
3
  width: 475px;
4
  height: 400px;
5
  margin: 50px auto;
6
}
7
 
8
.background {
9
  position: absolute;
10
  z-index: 1;
11
  left: 120px;
12
  display: block;
13
}
14
 
15
.hover {
16
  height: 0%;
17
  background: url(http://cssdeck.com/uploads/media/items/4/4af1rdU.png) no-repeat;
18
  position: absolute;
19
  background-position: 45% 0;
20
  z-index: 2;
21
 
22
  -webkit-transition: height 1s ease;
23
  -moz-transition: height 1s ease;
24
  -o-transition: height 1s ease;
25
  -ms-transition: height 1s ease;
26
  transition: height 1s ease;
27
  width: 100%;
28
}
29
 
30
.click {
31
  height: 0%;
32
  background: url(http://cssdeck.com/uploads/media/items/1/1ICzabQ.png) no-repeat;
33
  position: absolute;
34
  background-position: 45% 0;
35
  z-index: 2;
36
 
37
  -webkit-transition: height 1s ease;
38
  -moz-transition: height 1s ease;
39
  -o-transition: height 1s ease;
40
  -ms-transition: height 1s ease;
41
  transition: height 1s ease;
42
  width: 100%;
43
}
44
 
45
.item:hover .hover {
46
  height: 100%;
47
}
48
 
49
.item:active .click {
50
  height: 100%;
51
}
52
 
53
.laser {
54
  height: 3px;
55
  width: 100%;
56
  background: #86ff5e;
57
  display: block;
58
  position: absolute;
59
  bottom: -2px;
60
 
61
  -webkit-border-radius: 50%;
62
  -moz-border-radius: 50%;
63
  border-radius: 50%;
64
 
65
  -webkit-box-shadow: 0 0 20px 10px #86ff5e;
66
  -moz-box-shadow: 0 0 20px 10px #86ff5e;
67
  box-shadow: 0 0 20px 10px #86ff5e;
68
 
69
  -webkit-transition: opacity .25s ease;
70
  -moz-transition: opacity .25s ease;
71
  -o-transition: opacity .25s ease;
72
  -ms-transition: opacity .25s ease;
73
  transition: opacity .25s ease;
74
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
75
  filter: alpha(opacity=0);
76
  opacity: 0;
77
 
78
  -webkit-transition-delay: .75s;
79
  -moz-transition-delay: .75s;
80
  -o-transition-delay: .75s;
81
  -ms-transition-delay: .75s;
82
  transition-delay: .75s;
83
}
84
 
85
.claser {
86
  height: 3px;
87
  width: 100%;
88
  background: #01c9ee;
89
  display: block;
90
  position: absolute;
91
  bottom: -2px;
92
 
93
  -webkit-border-radius: 50%;
94
  -moz-border-radius: 50%;
95
  border-radius: 50%;
96
 
97
  -webkit-box-shadow: 0 0 20px 10px #01c9ee;
98
  -moz-box-shadow: 0 0 20px 10px #01c9ee;
99
  box-shadow: 0 0 20px 10px #01c9ee;
100
 
101
  -webkit-transition: opacity .25s ease;
102
  -moz-transition: opacity .25s ease;
103
  -o-transition: opacity .25s ease;
104
  -ms-transition: opacity .25s ease;
105
  transition: opacity .25s ease;
106
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
107
  filter: alpha(opacity=0);
108
  opacity: 0;
109
 
110
  -webkit-transition-delay: .75s;
111
  -moz-transition-delay: .75s;
112
  -o-transition-delay: .75s;
113
  -ms-transition-delay: .75s;
114
  transition-delay: .75s;
115
}
116
 
117
.item:hover .laser {
118
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
119
  filter: alpha(opacity=100);
120
  opacity: 1;
121
 
122
  -webkit-transition-delay: 0s;
123
  -moz-transition-delay: 0s;
124
  -o-transition-delay: 0s;
125
  -ms-transition-delay: 0s;
126
  transition-delay: 0s;
127
}
128
 
129
.item:active.laser {
130
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
131
  filter: alpha(opacity=100);
132
  opacity: 1;
133
 
134
  -webkit-transition-delay: 0s;
135
  -moz-transition-delay: 0s;
136
  -o-transition-delay: 0s;
137
  -ms-transition-delay: 0s;
138
  transition-delay: 0s;
139
}
140
 
141
.item:hover .claser {
142
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
143
  filter: alpha(opacity=100);
144
  opacity: 1;
145
 
146
  -webkit-transition-delay: 0s;
147
  -moz-transition-delay: 0s;
148
  -o-transition-delay: 0s;
149
  -ms-transition-delay: 0s;
150
  transition-delay: 0s;
151
}
152
 
153
.item:active.claser {
154
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
155
  filter: alpha(opacity=100);
156
  opacity: 1;
157
 
158
  -webkit-transition-delay: 0s;
159
  -moz-transition-delay: 0s;
160
  -o-transition-delay: 0s;
161
  -ms-transition-delay: 0s;
162
  transition-delay: 0s;
163
}
164
 
 

CSS3 Laser Effect

CSSDeck G+