Ajax Loader
HTML 
<!-- ICONS -->
1
<!-- ICONS -->
2
<svg id="svg-source" height="0" version="1.1"  xmlns="http://www.w3.org/2000/svg"
3
xmlns:xlink="http://www.w3.org/1999/xlink" style="position: absolute">
4
 <g id="man-people-user" data-iconmelon="Streamline Icon Set:de32eb2621491c1a881a9fe846236da1">
5
    <g id="Expanded">
6
      <g>
7
        <g>
8
          <path  d="M16.028,20c-4.764,0-8.639-4.486-8.639-10s3.875-10,8.639-10c4.763,0,8.638,4.486,8.638,10
9
        S20.791,20,16.028,20z M16.028,1.333C12,1.333,8.722,5.221,8.722,10s3.277,8.667,7.306,8.667c4.029,0,7.306-3.888,7.306-8.667
10
        S20.057,1.333,16.028,1.333z"></path>
11
        </g>
12
      <g>
13
         <path  d="M31.988,32H0.012v-4.515c0-1.967,1.245-3.733,3.097-4.395l8.224-2.266v-2.77h1.333v3.785L3.51,24.361
14
        c-1.275,0.458-2.165,1.72-2.165,3.124v3.182h29.309v-3.182c0-1.404-0.889-2.666-2.213-3.139l-9.107-2.506v-3.758h1.332v2.742
15
        l8.178,2.251c1.9,0.677,3.145,2.442,3.145,4.409V32z"></path>
16
       </g>
17
       <g>
18
                    <path  d="M21.865,8.812c-0.045,0-0.09-0.001-0.137-0.003c-1.5-0.055-3.25-1.004-4.361-2.287
19
        C16.59,7.513,15.48,8.15,14.106,8.383c-2.403,0.413-5.152-0.51-5.988-1.321l0.928-0.957c0.403,0.391,2.69,1.329,4.836,0.964
20
        c1.332-0.226,2.292-0.911,2.854-2.034l0.558-1.114l0.617,1.082c0.738,1.292,2.508,2.425,3.867,2.475
21
        c0.604,0.016,1.033-0.165,1.307-0.571l1.105,0.745C23.686,8.403,22.863,8.812,21.865,8.812z"></path>
22
                  </g>
23
                </g>
24
              </g>
25
            </g>
26
            <g id="lock-locker" data-iconmelon="Streamline Icon Set:5d43c6f45cdbecfd5b8a12bc9e5dd33c">
27
              <g id="Expanded">
28
                <g>
29
                  <g>
30
                    <circle  cx="16" cy="20" r="1.333"></circle>
31
                  </g>
32
          <g>
33
              <path  d="M16,25.333c-0.369,0-0.667-0.298-0.667-0.666v-4C15.333,20.298,15.631,20,16,20s0.667,0.298,0.667,0.667
34
        v4C16.667,25.035,16.369,25.333,16,25.333z"></path>
35
          </g>
36
          <g>
37
            <path  d="M28,32H4V12h24V32z M5.333,30.667h21.333V13.333H5.333V30.667z"></path>
38
        </g>
39
        <g>
40
         <path  d="M24,12.667h-1.333V8c0-3.676-2.991-6.667-6.667-6.667c-3.676,0-6.667,2.99-6.667,6.667v4.667H8V8
41
        c0-4.412,3.588-8,8-8c4.411,0,8,3.588,8,8V12.667z"></path>
42
           </g>
43
        </g>
44
      </g>
45
   </g>
46
</svg>
47
<!-- ICONS -->
48
 
49
 
50
 
51
 
52
<div class="wrapper">
53
  <div class="header">
54
    <h3 class="sign-in">Sign in</h3>
55
    <div class="button">
56
      Register
57
    </div>
58
  </div>
59
     <div class="clear"></div>
60
  <form action="#">
61
      <div>
62
         <label class="user" for="text">
63
           <svg viewBox="0 0 32 32">
64
                    <g filter="">
65
                      <use xlink:href="#man-people-user"></use>
66
                    </g>
67
                  </svg>
68
         </label>
69
        <input class="user-input" type="text" name="name" id="name" placeholder="My name is"  />
70
      </div>
71
      <div>
72
        <label class="lock" for="password">
73
          <svg viewBox="0 0 32 32">
74
             <g filter="">
75
               <use xlink:href="#lock-locker"></use>
76
              </g>
77
            </svg>
78
        </label>
79
        <input type="password" name="name" id="name" placeholder="" />
80
      </div>
81
     <div>
82
      <input type="submit" value="Sign in" />
83
    </div>
84
    <div class="radio-check">  
85
      <input type="radio" class="radio-no" id="no" name="remember" value="no" checked>
86
      <label for="no"><i class="fa fa-times"></i></label>
87
      <input type="radio" class="radio-yes" id="yes" name="remember" value="yes">
88
      <label for="yes"><i class="fa fa-check"></i></label>
89
      <span class="switch-selection"></span>
90
    </div>
91
      <span class="check-label">Remember me</span>
92
      <span class="forgot-label">Lost your password?</span>
93
      <div class="clear"></div>
94
  </form>
95
</div>
96
 
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500);
1
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500);
2
@import url(http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css);
3
 
4
$bg:#1a1f25;
5
$button:#e6b333;
6
$border:#22272d;  
7
 
8
 
9
 
10
*, *:after, *:before{
11
  box-sizing:border-box;
12
}
13
 
14
html, body {background:$bg;font-family: 'Roboto', sans-serif;}
15
 
16
  .clear{clear:both;}
17
18
#man-people-user, #lock-locker {
19
  fill:white;
20
}
21
 
22
.wrapper{
23
  width:300px;
24
  margin:12% auto;
25
}
26
 
27
form {position:relative;}
28
 
29
.clear {clear:both;}
30
.sign-in {
31
  float:left;
32
  color:white;
33
  font-size:1.3em;
34
}
35
.button {
36
  float:right;
37
  color:#7f8084;
38
  border:1px solid $border;
39
  padding:7px 15px;
40
  border-radius:3px;
41
  font-size:0.8em;
42
  cursor:pointer;
43
}
44
.button:hover {color:#d3d3d3}
45
.lock {
46
  position:absolute;
47
  width:30px;
48
  height:30px;
49
  margin-top:10px;
50
  padding:7px;
51
  left:5px;
52
  &::after {
53
    content:"";
54
    width:1px;
55
    height:30px;
56
    position:absolute;
57
    background:$border;
58
    top:0px;
59
    left:100%;
60
  }
61
}
62
.user {
63
64
  position:absolute;
65
  width:30px;
66
  height:30px;
67
  margin-top:10px;
68
  padding:7px;
69
  left:5px;
70
  &::after {
71
    content:"";
72
    width:1px;
73
    height:30px;
74
    position:absolute;
75
    background:$border;
76
    top:0px;
77
    left:100%;
78
  }
79
}
80
 
81
input {
82
  width:100%;
83
  padding:5px;
84
  height:40px;
85
  border-radius:3px;
86
  margin:5px 0;
87
  outline: none;
88
}
89
input[type="text"]:focus, input[type="password"]:focus {
90
  border:1px solid white;
91
  box-shadow:none;
92
}
93
.user-input:focus .user{
94
  background:white !important;
95
  
96
}
97
 
98
 
99
input[type="text"]{
100
  background:transparent;
101
  border:2px solid $border;
102
  padding-left:45px;
103
  color:$button;
104
}
105
input[type="password"]{
106
  background:transparent;
107
  border:2px solid $border;
108
  padding-left:45px;
109
  color:$button;
110
}
111
input[type="submit"]{
112
  background:$button;
113
  border:none;
114
  color:white;
115
  text-align:center;
116
  font-size:0.8em;
117
  cursor:pointer;
118
}
119
 
120
input[type="radio"]{
121
  display:none;
122
}
123
.radio-check {
124
  width:50px;
125
  height:20px;
126
  border:1px solid $border;
127
  border-radius:30px;
128
  margin-top:10px;
129
  float:left;
130
  text-align:center;
131
  padding:4px 0;
132
  color:$button;
133
  font-size:0.65em;
134
  position:relative;
135
  label{
136
    margin:0 2px;
137
    cursor:pointer;
138
  }
139
  .switch-selection{
140
    display: block;
141
    position: absolute;
142
    width:11px;
143
    height:11px;
144
    border-radius:50%;
145
    background:#babbbd;
146
    margin-top:-11px;
147
    margin-left:11px;
148
    transition: 0.2s ease-out;
149
  }
150
151
}
152
 
153
 .radio-yes:checked ~ .switch-selection{
154
    margin-left:25px !important;
155
  }
156
157
 
158
.check-label {
159
  font-size:0.8em;
160
  color:#7f8084;
161
  margin-top:10px;
162
  float:left;
163
  padding:3px 0;
164
  margin-left:10px;
165
}
166
 
167
 
168
.forgot-label {
169
  font-size:0.8em;
170
  color:#7f8084;
171
  margin-top:10px;
172
  float:right;
173
  padding:3px 0;
174
  cursor:pointer;
175
}
176
 
 

Sign in

CSSDeck G+