Ajax Loader
HTML 
<div class='cup'>
1
<div class='cup'>
2
  <div class='filled'></div>
3
</div>
4
<h1>Would you like some coffee ?</h1>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300);
1
@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300);
2
* {
3
  box-sizing: border-box;
4
  -webkit-font-smoothing: antialiased;
5
}
6
 
7
html, body {
8
  width: 100%;
9
  height: 100%;
10
  margin: 0;
11
  padding: 0;
12
}
13
 
14
body {
15
  background: #ecf0f1;
16
  font-size: 1em;
17
}
18
 
19
h1 {
20
  font-family: "Yanone Kaffeesatz", Helvetica, sans-serif;
21
  text-align: center;
22
  font-size: 3.5em;
23
  margin: -1.5em auto;
24
  color: #262626;
25
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8), 0 -1px 0 white;
26
}
27
 
28
.cup {
29
  /*position*/
30
  margin: 10em auto;
31
  /*Style*/
32
  width: 11.09017em;
33
  height: 11.09017em;
34
  border-bottom-left-radius: 1em;
35
  border-bottom-right-radius: 1em;
36
}
37
.cup:before, .cup:after {
38
  content: '';
39
  display: block;
40
  float: left;
41
  box-shadow: 0 0 0 1em #262626;
42
  position: absolute;
43
}
44
.cup:before {
45
  height: 6.8541em;
46
  width: 1.61803em;
47
  margin: 1.62232em 12.16886em;
48
  border-top-right-radius: 1em;
49
  border-bottom-right-radius: 1em;
50
}
51
.cup:after {
52
  height: 1em;
53
  width: 16.94427em;
54
  margin: 12.26884em -2.61803em;
55
  box-shadow: inset 0 1em 0 0.61803em #262626;
56
  border-bottom-left-radius: 1em;
57
  border-bottom-right-radius: 1em;
58
}
59
 
60
.cup .filled {
61
  display: block;
62
  width: 101%;
63
  height: 100%;
64
  float: left;
65
  border-bottom-left-radius: 0.90909em;
66
  border-bottom-right-radius: 0.90909em;
67
  box-shadow: inset 0 0 0 0.23607em #ecf0f1, 0 0 0 1em #262626;
68
  margin-left: -1px;
69
  margin-right: 3px;
70
  background-image: -webkit-linear-gradient(top, #ecf0f1 25%, #643001 25%, #643001 50%, #532700 50%, #532700 75%, #3a1c00 75%);
71
  background-image: linear-gradient(to bottom, #ecf0f1 25%, #643001 25%, #643001 50%, #532700 50%, #532700 75%, #3a1c00 75%);
72
}
73
 
 

Would you like some coffee ?

CSSDeck G+