Ajax Loader
×

iOS 6 Status Bar

A replica of the iOS 6 Status Bar.

Uses JS because it updates to update the time.

HTML 
<div id="status">
1
<div id="status">
2
<div id="time"></div>
3
<img src="http://iphone-screenshot.com/img/sbar_antenna.png" id="net">
4
<img src="http://iphone-screenshot.com/img/sbar_wifi.png" id="wifi">
5
<img src="http://iphone-screenshot.com/img/sbar_cell.png" id="battery">
6
</div>
 
CSS 
#status {
1
#status {
2
  background: #000;
3
  color: #bebebe;
4
  font-family: Helvetica, Arial;
5
  font-size: 16pt;
6
  font-weight: bold;
7
  height: 40px;
8
  left: 0px;
9
  line-height: 1.9em;
10
  position: absolute;
11
  text-align: center;
12
  top: 0px;
13
  width: 100%;
14
  /* you can change the width and the icons will fit! */
15
}
16
#net {
17
  left: 4px;
18
  position: absolute;
19
  top: 0px;
20
}
21
#wifi {
22
  left: 54px;
23
  position: absolute;
24
  top: 0px;
25
}
26
#battery {
27
  right: 4px;
28
  position: absolute;
29
  top: 0px;
30
}
31
img {
32
  -webkit-user-drag: none;
33
}
 
JavaScript 
function GetClock(){
1
function GetClock(){
2
d = new Date();
3
nhour  = d.getHours();
4
nmin   = d.getMinutes();
5
if(nhour ==  0) {ap = " AM";nhour = 12;}
6
else if(nhour <= 11) {ap = " AM";}
7
else if(nhour == 12) {ap = " PM";}
8
else if(nhour >= 13) {ap = " PM";nhour -= 12;}
9
if(nmin <= 9) {nmin = "0" +nmin;}
10
document.getElementById("time").innerHTML=""+nhour+":"+nmin+ap+"";
11
setTimeout("GetClock()", 1000);
12
}
13
window.onload=GetClock;
 

iOS 6 Status Bar

CSSDeck G+