Ajax Loader
HTML 
<!doctype html>
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8"/>
5
  <title>Loading...</title>
6
</head>
7
<body>
8
9
  <div class="wait">please wait . . .</div>
10
 
11
</body>
12
</html>
 
CSS 
*{
1
*{
2
  padding:0;
3
  margin:0;
4
}
5
 
6
body{
7
  background-color:#2b2b2b;
8
}
9
 
10
.wait{
11
  width:60%;
12
  margin:100px auto;
13
  text-align:center;
14
  text-transform: Capitalize;
15
  /* border-bottom:1px solid lightgreen; */
16
  position: relative;
17
  color:#beb;
18
  animation: glowtext .8s linear infinite alternate;
19
  padding:2px;
20
}
21
 
22
@keyframes glowtext {
23
    0% {
24
       color:#393;    
25
       /* text-shadow:10px 0px 3px rgba(0,0,0,.8); */
26
    }
27
28
    50% {
29
       color:#6f6;    
30
       /* text-shadow:0 0px 0px rgba(0,0,0,1); */
31
    }
32
33
    100% {
34
      color:#393;
35
      /* text-shadow:-10px 0px 3px rgba(0,0,0,.8); */
36
    }
37
}
38
 
39
.wait:before{
40
  content:"";
41
  display: block;
42
  position:absolute;
43
  bottom:0;
44
  left:0;
45
  width:100%;
46
  height:1px;
47
48
  background-color: #0B0B0B;
49
  animation: glow .4s linear infinite alternate;
50
51
}
52
 
53
 
54
@keyframes glow {
55
    0% {
56
      border-color: #393;
57
      box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;}
58
    100% {
59
      border-color: #6f6;
60
      box-shadow: 0 0 15px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;}
61
}
62
 
63
 
64
 
65
.wait:after{
66
  content:"";
67
  display: block;
68
  position:absolute;
69
  bottom:0;
70
  left:0;
71
  width:10%;
72
  height:3px;
73
  background-color:#6f6;
74
 
75
  animation:progress linear .8s infinite /* alternate */ ;
76
}
77
 
78
@keyframes progress {
79
  0%  {left:0   ;width:0   ;right:100%}
80
  50% {left:0   ;width:100%;right:0   }
81
  100%{left:100%;width:0   ;right:0   }
82
};
83
 
84
 
 

please wait

CSSDeck G+