Ajax Loader
HTML
<div id="phone">
1
<div id="phone">
2
<div id="box">
3
  <div id="header" class="entypo-chart-bar"> Carrier 4G <span class="entypo-progress-1"></span></div>
4
  <input type="checkbox" id="lock">
5
  <label for="lock" id="label">
6
    <span class='entypo-lock'></span>
7
    <span class='entypo-lock-open'></span>
8
  </label>
9
  <div class="time">
10
    <span id="time">00:00</span>
11
    <br/>
12
    <span id="TheDate">monday January 15th</span>
13
  </div>
14
  <div class="pass">
15
    <span class="entypo-user"></span><input type="text" id="Name" placeholder="Username" ><br/>
16
    <span class="entypo-lock"></span><input type="password" id="Pwd" placeholder="Password" ><br/><br/>
17
    <input type="submit" value="Login">
18
  </div>
19
  <div class="unlock"></div>
20
</div>
21
</div>
 
CSS
@import url(http://weloveiconfonts.com/api/?family=entypo);
1
@import url(http://weloveiconfonts.com/api/?family=entypo);
2
 
3
/* entypo */
4
[class*="entypo-"]:before {
5
  font-family: 'entypo', sans-serif;
6
}
7
 
8
html {
9
  background:#ddd;
10
}
11
 
12
#phone {
13
  position:absolute;
14
  left:0;
15
  right:0;
16
  margin:10px auto;
17
  padding:70px 18px 68px 18px;
18
  width:240px;
19
  background:#444;
20
  border-radius:30px;
21
}
22
 
23
#phone:before {
24
  content:'';
25
  position:absolute;
26
  left:0;
27
  right:0;
28
  margin:-35px auto;
29
  height:8px;
30
  width:45px;
31
  background:#333;
32
  border-radius:20px;
33
}
34
 
35
#phone:after {
36
  content:'';
37
  position:absolute;
38
  left:0;
39
  right:0;
40
  margin:12px auto;
41
  height:42px;
42
  width:42px;
43
  background:#333;
44
  border-radius:20px;
45
}
46
 
47
#box {
48
  width:240px;
49
  height:400px;
50
  padding:0;
51
  overflow:hidden;  
52
  background: rgb(255,255,255); /* Old browsers */
53
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
54
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2YzZjNmMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2VkZWRlZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
55
background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(243,243,243,1) 50%, rgba(237,237,237,1) 51%, rgba(255,255,255,1) 100%); /* FF3.6+ */
56
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(243,243,243,1)), color-stop(51%,rgba(237,237,237,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
57
background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
58
background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
59
background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* IE10+ */
60
background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(243,243,243,1) 50%,rgba(237,237,237,1) 51%,rgba(255,255,255,1) 100%); /* W3C */
61
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-8 */
62
 
63
}
64
 
65
#header {
66
  width:240px;
67
  height:15px;
68
  font-size:12Px;
69
  position:absolute;
70
  background:rgba(1,1,1,0.5);
71
  color:#fff;
72
}
73
span[class*="progress-1"]{
74
  float:right;
75
  margin:0 5px;
76
}
77
 
78
.time {
79
  position:absolute;
80
  margin:13px 0;
81
  padding:20px 0 0 0;
82
 
83
  height:50px;
84
  width:240px;
85
 
86
  text-align:center;
87
  line-height:20px;
88
  font-size:40px;
89
  color:#eee;
90
  background:#888;
91
  
92
  
93
  -webkit-transition: all .5s ease;
94
-moz-transition: all .5s ease;
95
-ms-transition: all .5s ease;
96
-o-transition: all .5s ease;
97
transition: all .5s ease;
98
}
99
 
100
#TheDate {
101
  margin:0;
102
  padding:0;
103
  font-size:12px;
104
}
105
 
106
input[type="checkbox"]{
107
  position:absolute;
108
  display:none;
109
}
110
label[for="lock"] {
111
  position:absolute;
112
  left:0;
113
  right:0;
114
  margin:325px auto;
115
  width:20px;
116
  font-size:25px;
117
  border:3px solid #ccc;
118
  border-radius:50px;
119
  cursor:pointer;
120
  color:#ccc;
121
  padding:15px 20px;
122
  -webkit-transition: all .5s ease;
123
-moz-transition: all .5s ease;
124
-ms-transition: all .5s ease;
125
-o-transition: all .5s ease;
126
transition: all .5s ease;
127
}
128
 
129
#lock:checked + label[for="lock"] {
130
  margin:20px auto;
131
  -webkit-transition: all .5s ease;
132
-moz-transition: all .5s ease;
133
-ms-transition: all .5s ease;
134
-o-transition: all .5s ease;
135
transition: all .5s ease;
136
}
137
span[class*="open"]{
138
  display:none;
139
}
140
#lock:checked + label[for="lock"] span[class*="open"]{
141
  display:block;
142
}
143
#lock:checked + label[for="lock"] .entypo-lock{
144
  display:none;
145
}
146
 
147
#lock:checked ~ .unlock {
148
  height:23%;
149
}
150
 
151
#lock:checked ~ .time {
152
  height:0;
153
  opacity:0;
154
  z-index:-1;
155
  -webkit-transition: all .5s ease;
156
-moz-transition: all .5s ease;
157
-ms-transition: all .5s ease;
158
-o-transition: all .5s ease;
159
transition: all .5s ease;
160
}
161
 
162
#lock:checked ~ .pass {
163
  height:90px;
164
  padding:20px 10px;
165
  opacity:1;
166
  z-index:1;
167
  -webkit-transition: all .5s ease;
168
-moz-transition: all .5s ease;
169
-ms-transition: all .5s ease;
170
-o-transition: all .5s ease;
171
transition: all .5s ease;
172
}
173
 
174
.pass {
175
  position:absolute;
176
  margin:270px 0 0 0;
177
  padding:0 10px;
178
  
179
  opacity:0;
180
  height:0;
181
  width:220px;
182
  background:rgba(0,0,0,.5);
183
  z-index:-1;
184
}
185
 
186
.pass input {
187
  width:150px;
188
  height:22px;
189
  border:none;
190
  background:none;
191
  outline: none;
192
  color:#ccc;
193
}
194
 
195
input[type="submit"] {
196
  float:right;
197
  width:100%;
198
  height:35px;
199
  text-align:center;
200
  border-radius:5px;
201
  background:#ccc;
202
  color:#888;
203
}
204
 
205
.pass span {
206
  float:left;
207
  display:block;
208
  width:25px;
209
  height:22px;
210
  line-height:22px;
211
  text-align:center;
212
  color:#ccc;
213
}
214
 
215
.unlock {
216
  width:100%;
217
  height:100%;
218
  background:rgba(0,0,0,.5);
219
  -webkit-transition: all .5s ease;
220
-moz-transition: all .5s ease;
221
-ms-transition: all .5s ease;
222
-o-transition: all .5s ease;
223
transition: all .5s ease;
224
}
 
JavaScript
(function() {
1
(function() {
2
  var Timesetting = function(x) {
3
    return x < 10 ? '0'+x : x;
4
  };
5
  var getTime = function() {
6
    var timing = new Date();
7
    var Hours = Timesetting( timing.getHours() );
8
    var Minutes = Timesetting( timing.getMinutes() );
9
    var current_time = [Hours,Minutes].join(':');
10
    time.innerHTML = current_time;
11
  };
12
  getTime();
13
  setInterval(getTime, 1000);
14
}());
15
 
16
(function() {
17
  var get_Date = function() {
18
    var thedate = new Date();
19
    var day = new Array("sunday","monday","tuesday","wednesday","thursday","friday","saturday");
20
    var month = new Array("January","Febuary","March","April","May","June","July","August","September","October","November","December");
21
    var current_date = day[thedate.getDay()]+" "+
22
                         month[thedate.getMonth()]+" "+
23
                         thedate.getDate();
24
  TheDate.innerHTML = current_date;
25
                    
26
  };
27
  get_Date();
28
  setInterval("get_Date()",1000);
29
 
30
}());
 

Flat Iphone Login UI

CSSDeck G+