Ajax Loader
HTML 
<!doctype html>
1
<!doctype html>
2
<html lang="en">
3
<head>
4
  <meta charset="UTF-8">
5
  <title>Login</title>
6
  <!--[if lt IE 9]>
7
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
8
  <![endif]-->
9
</head>
10
<body>
11
  <div id="login">
12
    <form action="" method="post" name="f1">
13
      <fieldset>
14
        <label for="userName" class="fontawesome-user"></label>
15
        <input type="text" required name="userName" id="userName"  placeholder="Username" >
16
        <label for="userPwd" class="fontawesome-lock"></label>
17
        <input type="password" required name="userPwd" id="userPwd" placeholder="password" >
18
        <input type="submit" value="Login">
19
      </fieldset>
20
    </form>
21
  </div><!-- end login -->
22
</body>
23
</html>
 
CSS 
@charset "utf-8";
1
@charset "utf-8";
2
/* CSS Document */
3
 
4
/* ---------- FONTAWESOME ---------- */
5
/* ---------- http://fortawesome.github.com/Font-Awesome/ ---------- */
6
/* ---------- http://weloveiconfonts.com/ ---------- */
7
 
8
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
9
 
10
/* ---------- ERIC MEYER'S RESET CSS ---------- */
11
/* ---------- http://meyerweb.com/eric/tools/css/reset/ ---------- */
12
 
13
@import url(http://meyerweb.com/eric/tools/css/reset/reset.css);
14
 
15
/* ---------- FONTAWESOME ---------- */
16
 
17
/* [class*="fontawesome-"]:before {
18
  font-family: 'FontAwesome', sans-serif;
19
} */
20
/* general */
21
body {
22
  background-color: #393937;
23
  font: 14px/1.5em  Arial, sans-serif;
24
}
25
input {
26
  font-size: 1em;
27
  line-height: 1.5em;
28
  margin: 0;
29
  padding: 0;
30
  -webkit-appearance: none;
31
  appearance: none;
32
}
33
 
34
/* login */
35
#login {
36
  width: 242px;
37
  margin: 50px auto;
38
39
}
40
#login label {
41
  position: absolute;
42
  display: block;
43
  width: 36px;
44
  height: 48px;
45
  line-height: 48px;
46
  text-align: center;
47
  font-family: 'FontAwesome', sans-serif;
48
  color: #676767;
49
  text-shadow: 0 1px 0 #fff;
50
}
51
#login input {
52
  border: none;
53
  width: 204px;
54
  height: 48px;
55
  padding-left: 36px;
56
  border: 1px solid #000;
57
  background-color: #dedede;
58
  background: -webkit-linear-gradient(top, #c3c3c3 0%, #eaeaea 100%);
59
  color: #363636;
60
  text-shadow: 0 1px 0 #fff;
61
  outline: none;
62
}
63
#login input[type="text"] {
64
  border-bottom: none;
65
  -webkit-border-radius: 5px 5px 0 0;
66
  -moz-border-radius: 5px 5px 0 0;
67
  border-radius: 5px 5px 0 0;
68
  -webkit-box-shadow:inset 0 -1px 0 rgba(0, 0, 0, .4);
69
}
70
#login input[type="password"] {
71
  border-top:none;
72
  -webkit-border-radius: 0 0 5px 5px;
73
  -moz-border-radius: 0 0 5px 5px;
74
  border-radius: 0 0 5px 5px;
75
  margin-bottom: 20px;
76
  -webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .2);
77
}
78
#login input[type="submit"] {
79
  margin: 0;
80
  padding: 0;
81
  width: 240px;
82
  background-color: #e14d4d;
83
  border: 1px solid #391515;
84
  -webkit-border-radius: 5px;
85
  -moz-border-radius: 5px;
86
  border-radius: 5px;
87
  color: #fff;
88
  text-align: center;
89
  font-weight: bold;
90
  line-height: 48px;
91
  text-transform: uppercase;
92
  /* background-image: none; */
93
  background-image:-webkit-linear-gradient(top, #f15958 0%, #e14d4d 100%);
94
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 1px 1px rgba(0, 0, 0, .2) ;
95
  -moz-box-shadow: hoff voff radius color;
96
  box-shadow: hoff voff radius color;
97
  text-shadow: 0 1px 0 #000;
98
}
99
#login input[type="submit"]:hover {
100
  background-color: #f15958;
101
  background-image:-webkit-linear-gradient(top, #e14d4d 0%, #f55b5b 100%);
102
}
 
JavaScript 
window.onload=function() {
1
window.onload=function() {
2
  var un = document.getElementById("userName");
3
  var pwd = document.getElementById("userPwd");
4
  un.value= "Username";
5
  pwd.value= "Password";
6
  un.onfocus = function() {
7
    un.value = '';
8
  };
9
  un.onblur = function() {
10
    un.value = 'Username';
11
  };
12
  pwd.onfocus = function() {
13
    pwd.value = '';
14
  };
15
  pwd.onblur = function() {
16
    pwd.value = 'Password';
17
  };
18
};
 

LOGIN

CSSDeck G+