Ajax Loader
HTML 
<!DOCTYPE html>
1
<!DOCTYPE html>
2
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
3
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
4
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
5
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
6
<head>
7
  <meta charset="utf-8">
8
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
  <title>Notification Windows</title>
10
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
11
</head>
12
<body>
13
  <div class="container">
14
    <section class="notif notif-notice">
15
      <h6 class="notif-title">Congratulations!</h6>
16
      <p>You found the answer to the ultimate question of life, the universe, and everything.</p>
17
      <div class="notif-controls">
18
        <a href="#" class="notif-minimize">Minimize</a>
19
        <a href="#" class="notif-zoom">Zoom</a>
20
        <a href="#" class="notif-close">Close</a>
21
      </div>
22
    </section>
23
    <section class="notif notif-alert">
24
      <h6 class="notif-title">Error!</h6>
25
      <p>No information signal or material object can travel faster than light in vacuum.</p>
26
      <div class="notif-controls">
27
        <a href="#" class="notif-minimize">Minimize</a>
28
        <a href="#" class="notif-zoom">Zoom</a>
29
        <a href="#" class="notif-close">Close</a>
30
      </div>
31
    </section>
32
    <section class="notif notif-warn">
33
      <h6 class="notif-title">Warning!</h6>
34
      <p>There is as yet insufficient data for a meaningful answer.</p>
35
      <div class="notif-controls">
36
        <a href="#" class="notif-minimize">Minimize</a>
37
        <a href="#" class="notif-zoom">Zoom</a>
38
        <a href="#" class="notif-close">Close</a>
39
      </div>
40
    </section>
41
  </div>
42
</body>
43
</html>
44
 
 
CSS 
/*
1
/*
2
 * Copyright (c) 2012-2013 Thibaut Courouble
3
 * http://www.cssflow.com
4
 *
5
 * Licensed under the MIT License:
6
 * http://www.opensource.org/licenses/mit-license.php
7
 *
8
 * View the Sass/SCSS source at:
9
 * http://www.cssflow.com/snippets/notification-windows/demo/scss
10
 *
11
 * Original PSD by Cosmin Negoita: http://goo.gl/3oYe1
12
 */
13
 
14
@import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);
15
 
16
body {
17
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
18
  color: #404040;
19
  background: #343137;
20
}
21
 
22
.container {
23
  margin: 20px auto;
24
  width: 380px;
25
}
26
 
27
.container .notif {
28
  margin: 10px 0;
29
}
30
 
31
.notif {
32
  position: relative;
33
  padding: 25px 30px 25px 100px;
34
  min-height: 50px;
35
  line-height: 22px;
36
  background: white;
37
  border-radius: 2px;
38
}
39
 
40
.notif:before {
41
  content: '';
42
  position: absolute;
43
  top: 25px;
44
  left: 30px;
45
  width: 40px;
46
  height: 40px;
47
  border: 5px solid;
48
  border-radius: 25px;
49
}
50
 
51
.notif p {
52
  font-size: 11px;
53
  color: #666;
54
}
55
 
56
.notif-title {
57
  margin: 0 0 5px;
58
  font-size: 14px;
59
  font-weight: bold;
60
  color: #333;
61
}
62
 
63
.notif-title:before, .notif-title:after {
64
  content: '';
65
  position: absolute;
66
  background: white;
67
  border-radius: 2px;
68
}
69
 
70
.notif-notice:before {
71
  background: #a7d155;
72
  border-color: #8fb14f;
73
}
74
 
75
.notif-notice .notif-title:before, .notif-notice .notif-title:after {
76
  top: 44px;
77
  left: 55px;
78
  width: 4px;
79
  height: 12px;
80
  -webkit-transform: rotate(45deg);
81
  -moz-transform: rotate(45deg);
82
  -ms-transform: rotate(45deg);
83
  -o-transform: rotate(45deg);
84
  transform: rotate(45deg);
85
}
86
 
87
.notif-notice .notif-title:after {
88
  top: 50px;
89
  left: 48px;
90
  width: 8px;
91
  height: 4px;
92
}
93
 
94
.notif-alert:before {
95
  background: #e34f4f;
96
  border-color: #c14343;
97
}
98
 
99
.notif-alert .notif-title:before, .notif-alert .notif-title:after {
100
  top: 43px;
101
  left: 53px;
102
  width: 4px;
103
  height: 14px;
104
  -webkit-transform: rotate(45deg);
105
  -moz-transform: rotate(45deg);
106
  -ms-transform: rotate(45deg);
107
  -o-transform: rotate(45deg);
108
  transform: rotate(45deg);
109
}
110
 
111
.notif-alert .notif-title:after {
112
  top: 48px;
113
  left: 48px;
114
  width: 14px;
115
  height: 4px;
116
}
117
 
118
.notif-warn:before {
119
  background: #f1e472;
120
  border-color: #cec260;
121
}
122
 
123
.notif-warn .notif-title:before, .notif-warn .notif-title:after {
124
  top: 42px;
125
  left: 53px;
126
  width: 4px;
127
  height: 11px;
128
  background: #5c562b;
129
}
130
 
131
.notif-warn .notif-title:after {
132
  top: 54px;
133
  height: 4px;
134
}
135
 
136
.notif-controls {
137
  position: absolute;
138
  top: 0;
139
  right: 0;
140
  height: 16px;
141
  padding: 4px 3px 5px;
142
  background: #f0f0f0;
143
  border: solid #dcdcdc;
144
  border-width: 0 0 1px 1px;
145
  border-radius: 0 2px;
146
}
147
 
148
.notif-controls > a {
149
  position: relative;
150
  float: left;
151
  margin: 0 1px;
152
  width: 16px;
153
  height: 16px;
154
  font: 0/0 serif;
155
  text-shadow: none;
156
  color: transparent;
157
}
158
 
159
.notif-minimize:before {
160
  content: '';
161
  position: absolute;
162
  top: 11px;
163
  left: 4px;
164
  width: 7px;
165
  height: 2px;
166
  background: #bbb;
167
}
168
 
169
.notif-minimize:hover:before {
170
  background: #888;
171
}
172
 
173
.notif-zoom:before {
174
  content: '';
175
  position: absolute;
176
  top: 6px;
177
  left: 3px;
178
  width: 5px;
179
  height: 3px;
180
  border: 2px solid #bbb;
181
}
182
 
183
.notif-zoom:hover:before {
184
  border-color: #888;
185
}
186
 
187
.notif-close:before, .notif-close:after {
188
  content: '';
189
  position: absolute;
190
  top: 4px;
191
  left: 7px;
192
  width: 2px;
193
  height: 10px;
194
  background: #bbb;
195
  -webkit-transform: rotate(45deg);
196
  -moz-transform: rotate(45deg);
197
  -ms-transform: rotate(45deg);
198
  -o-transform: rotate(45deg);
199
  transform: rotate(45deg);
200
}
201
 
202
.notif-close:after {
203
  top: 8px;
204
  left: 3px;
205
  width: 10px;
206
  height: 2px;
207
}
208
 
209
.notif-close:hover:before, .notif-close:hover:after {
210
  background: #888;
211
}
212
 
213
/* IE 8 doesn't support CSS transforms; use Unicode instead. */
214
 
215
.lt-ie9 .notif-notice .notif-title:before {
216
  content: '\2714';
217
  display: block;
218
  top: 25px;
219
  left: 30px;
220
  width: 50px;
221
  font: bold 18px/50px "Arial Unicode MS";
222
  color: white;
223
  text-align: center;
224
  background: none;
225
}
226
 
227
.lt-ie9 .notif-notice .notif-title:after {
228
  display: none;
229
}
230
 
231
.lt-ie9 .notif-alert .notif-title:before {
232
  content: '\2716';
233
  display: block;
234
  top: 25px;
235
  left: 30px;
236
  width: 50px;
237
  font: bold 17px/50px "Arial Unicode MS";
238
  color: white;
239
  text-align: center;
240
  background: none;
241
}
242
 
243
.lt-ie9 .notif-alert .notif-title:after {
244
  display: none;
245
}
246
 
247
.lt-ie9 .notif-close:before {
248
  content: '\2716';
249
  display: block;
250
  top: 0;
251
  left: 0;
252
  width: 16px;
253
  font: 11px/19px 'Arial Unicode MS';
254
  color: #bbb;
255
  text-align: center;
256
  background: none;
257
}
258
 
259
.lt-ie9 .notif-close:after {
260
  display: none;
261
}
262
 
263
.lt-ie9 .notif-close:hover:before {
264
  color: #999;
265
}
266
 
 

Notification Windows

CSSDeck G+