Ajax Loader
HTML 
<div class="preloader-scan">
1
<div class="preloader-scan">
2
  <ul>
3
    <li></li>
4
    <li></li>
5
    <li></li>
6
    <li></li>
7
    <li></li>
8
    <li></li>
9
    <li></li>
10
    <li></li>
11
    <li></li>
12
    <li></li>
13
    <li></li>
14
    <li></li>
15
    <li></li>
16
    <li></li>
17
    <li></li>
18
    <li></li>
19
    <li></li>
20
    <li></li>
21
    <li></li>
22
    <li></li>
23
    <li></li>
24
    <li></li>
25
  
26
    <div class="diode">
27
      <div class="laser"></div>
28
    </div>
29
  </ul>
30
31
</div>
 
CSS 
.preloader-scan {
1
.preloader-scan {
2
  position: fixed;
3
  left: 0;
4
  right: 0;
5
  max-width: 200px;
6
  display: table;
7
  margin: 0 auto;
8
  height: 100%;
9
  text-align: center;
10
}
11
.preloader-scan li:nth-child(1) {
12
  width: 1px;
13
}
14
.preloader-scan li:nth-child(2) {
15
  width: 1px;
16
}
17
.preloader-scan li:nth-child(3) {
18
  width: 5px;
19
}
20
.preloader-scan li:nth-child(4) {
21
  width: 4px;
22
}
23
.preloader-scan li:nth-child(5) {
24
  width: 5px;
25
}
26
.preloader-scan li:nth-child(6) {
27
  width: 4px;
28
}
29
.preloader-scan li:nth-child(7) {
30
  width: 5px;
31
}
32
.preloader-scan li:nth-child(8) {
33
  width: 1px;
34
}
35
.preloader-scan li:nth-child(9) {
36
  width: 2px;
37
}
38
.preloader-scan li:nth-child(10) {
39
  width: 2px;
40
}
41
.preloader-scan li:nth-child(11) {
42
  width: 3px;
43
}
44
.preloader-scan li:nth-child(12) {
45
  width: 1px;
46
}
47
.preloader-scan li:nth-child(13) {
48
  width: 1px;
49
}
50
.preloader-scan li:nth-child(14) {
51
  width: 2px;
52
}
53
.preloader-scan li:nth-child(15) {
54
  width: 2px;
55
}
56
.preloader-scan li:nth-child(16) {
57
  width: 1px;
58
}
59
.preloader-scan li:nth-child(17) {
60
  width: 3px;
61
}
62
.preloader-scan li:nth-child(18) {
63
  width: 5px;
64
}
65
.preloader-scan li:nth-child(19) {
66
  width: 3px;
67
}
68
.preloader-scan li:nth-child(20) {
69
  width: 4px;
70
}
71
.preloader-scan li:nth-child(21) {
72
  width: 3px;
73
}
74
.preloader-scan li:nth-child(22) {
75
  width: 2px;
76
}
77
.preloader-scan li:nth-child(23) {
78
  width: 3px;
79
}
80
.preloader-scan li:nth-child(24) {
81
  width: 3px;
82
}
83
.preloader-scan ul {
84
  height: 100%;
85
  display: table-cell;
86
  vertical-align: middle;
87
  list-style-type: none;
88
  text-align: center;
89
}
90
.preloader-scan li {
91
  display: inline-block;
92
  width: 2px;
93
  height: 50px;
94
  background-color: #444;
95
}
96
.preloader-scan .laser {
97
  width: 130%;
98
  margin-left: -25%;
99
  background-color: tomato;
100
  height: 1px;
101
  position: absolute;
102
  top: 40%;
103
  z-index: 2;
104
  box-shadow: 0 0 4px red;
105
  -webkit-animation: scanning 2s infinite;
106
          animation: scanning 2s infinite;
107
}
108
.preloader-scan .diode {
109
  -webkit-animation: beam .01s infinite;
110
          animation: beam .01s infinite;
111
}
112
 
113
body {
114
  height: 100%;
115
}
116
 
117
@-webkit-keyframes beam {
118
  50% {
119
    opacity: 0;
120
  }
121
}
122
 
123
@keyframes beam {
124
  50% {
125
    opacity: 0;
126
  }
127
}
128
@-webkit-keyframes scanning {
129
  50% {
130
    -webkit-transform: translateY(75px);
131
            transform: translateY(75px);
132
  }
133
}
134
@keyframes scanning {
135
  50% {
136
    -webkit-transform: translateY(75px);
137
            transform: translateY(75px);
138
  }
139
}
 

Barcode Scanner

CSSDeck G+