Ajax Loader
HTML 
 
1
 
2
  <div class="container">
3
    <div class="center_wrapper">
4
      <div class="note red rounded">
5
        <img alt="" class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAhCAYAAADH97ugAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowOTgwMTE3NDA3MjA2ODExODIyQUI2NTZGMjczMjg3NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQjFDOEI3QUI1OTcxMUUyQTQ1NEM2N0M0OEZCNTg0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQjFDOEI3OUI1OTcxMUUyQTQ1NEM2N0M0OEZCNTg0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMTgyMkFCNjU2RjI3MzI4NzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDk4MDExNzQwNzIwNjgxMTgyMkFCNjU2RjI3MzI4NzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7Oag1KAAABbklEQVR42uyXu0oDURCGcxLdvIrPYaMGTCSgYASLCCnSeXmMiI2FhdoIKlioEAgSSKG+g76BjYVCbiqi/8AfWIaz657sgs0Z+Nhkzsx8LHuyuzGvb+85x5jj8dmlKe9Qa8A+eCIt5jIVycBDsBPK7TJnshLJoCPQtKw1uWbSigrgGDRiahqsKUwrksZTUE9w1nXWRspmYiRnYN1hs2xynhy/k5zRLLiwSB4stY/qew2cc0asKACXYFXl78GSRbTItXCscUYQJZKFK1BVjT1KBhbRgGs9la9yVqBFRXANyqqhC5bBMObaDFnTVfkyZxYnIrmAt6CkCu9A5Q9JWFZhTzhKnB2IaAMsqIIOWAEjh103oqyj8jK7lrds8TYl45x7fLC3rX9GBndvuWAnYB7cgG3wGTHox3J7soXMPKBUNsqWcXxMJBWlekykCi/yIi/yIi/6R9FLxOfMRfJi3yd7Lo1miv9Hk5fDL5emXwEGAGRKSazTuULwAAAAAElFTkSuQmCC" />
6
      </div>
7
      <div class="note yellow rounded">
8
        <img alt="" class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAhCAYAAADH97ugAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowOTgwMTE3NDA3MjA2ODExODIyQUI2NTZGMjczMjg3NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpBQjFDOEI3RUI1OTcxMUUyQTQ1NEM2N0M0OEZCNTg0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpBQjFDOEI3REI1OTcxMUUyQTQ1NEM2N0M0OEZCNTg0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMTgyMkFCNjU2RjI3MzI4NzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDk4MDExNzQwNzIwNjgxMTgyMkFCNjU2RjI3MzI4NzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4IT8tNAAABfElEQVR42uyXzUrDQBSFrWKl6QvoG/gUCgV/QVRQ0IULf8CFPosuRF0U6SIUF5WqFRTfxAeQ4kJBdxqN9Rw4QrgkNpPWXQY+Mr1z7z2ZzuRmUnh+fRtwbMO6froEDTqKrIEXse4SWHCcURuMqf8U6fd9RtHEo//512VuuVAulAvlQrlQn4WK4Bw8gmP97rUxx5FyMneRL74tdM4iTjdgBQQxCTr2xZkgcgEWIrYdzig0jnS4AiMZZsKYSyPC9k2hOrg3A3PgGpQcREq6wXljZ+46hb7AErg1DjMS81KIeBKZNXbmXOQy/O66d7AMWsZxSmvmdRGhz7Sxt5Tzw25vLv4qaJqACrgD5RiRsu66YuxN5QqSnqNAZ7eGsU9IzDbaJo2toRxBmnPdEPBdD4l6ZjZidnJiZQgV4DuI+Eki3UoQAzZBLYVITb5h1lrHwG1Q/cOnKp+w16LKsrMLTmPGTjTW6Vf1ZqI9cBixHYD9NCJZvibYxnV9cAn6EWAAPAhWNEwsXBEAAAAASUVORK5CYII=" />
9
      </div>
10
      <div class="note green rounded">
11
        <img alt="" class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowOTgwMTE3NDA3MjA2ODExODIyQUI2NTZGMjczMjg3NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCQUQ4QjdDNUI1OTcxMUUyQTQ1NEM2N0M0OEZCNTg0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCQUQ4QjdDNEI1OTcxMUUyQTQ1NEM2N0M0OEZCNTg0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMTgyMkFCNjU2RjI3MzI4NzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDk4MDExNzQwNzIwNjgxMTgyMkFCNjU2RjI3MzI4NzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4AX51jAAACwElEQVR42ryYS0hUYRTHZ6bonZEaFFQUSW8hhyyDklpU0LrXtkVZm5iEIFsabSJdKD0gWkVE1DraN1pKJWrbBssuBZnjZC8qtf+B/4XL1/0e985cD/xg7v2+e+6Z853XTHpsopQqU+aAGTAdV0GmjJefB5PgL5gCE+B0HEXpmJ6YC76Chcr9IqieLU+sDjFAZDmoqaQRm8ADcBUsUNbWGZ5T1xaD6+AeWK9za5g0gqcB1x4Cx8AIr/cajDgAXvHzZvAIbOf1QXAEvLbFxEaQByuU++PgFqgCLWCexoif3CcBew4sVdY/gyZQMBnxEBxPJSt3wBlTTLxNJS8F23FIEPaChoQM6GXc/DZ54hc4yjpQaRkDJ4MGmFJU3NVtUTjNb3UT3Ab9LN8m6QCjrimaYhbo5CU4Bd4o9+UI7xqOcpmtTsjnNSwo+8FZjaJ+numPkLUBruUDtSEoOfaYHvAeeNJ3/MBs1VTGsCPYAYYt+3aDFw4xIl8k5xtRsrjflx5LtQzKEKh32OdlGJxVjooHImTCoOO+6kyCBSntuG8mw3MuOj7QGMEI12I37nviEhuUTXaBrMO+fWCrwz5pZm1q2a5hijaDK2BRyIPDfIluJJP23wfqQta+MRMlzd8xXf+rmF9YiDrBDc1L6pklTSFrzUzNOs2zneygg74BtoppKsHbwHMqG2IQZh2O4E+UQXcLXbakwhlTorEFWwOTmfBxAgb4vUPGvfk2I9odIzuuZJmNRiNqZ2GyWmWLiQ0MOnXQ/QS6mLatmvQV+c65QQaXCyG/Qz4wszxTdsiMeRg8ASt57xk4AT7yWqauaxoj2gID0X3GwE5ej1K35zLUSKPaAy7TqA6O8L70GVydD3weYde9yFmlXTWgnN+ia1nxdBWzGEVZ3C7q8ezDBtliVGVxjZjiqObx74FJnncujrJ/AgwAVDasr4B2WnEAAAAASUVORK5CYII=" />
12
      </div>
13
      <div class="note purple rounded">
14
        <img alt="" class="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowOTgwMTE3NDA3MjA2ODExODIyQUI2NTZGMjczMjg3NSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCQUQ4QjdDOUI1OTcxMUUyQTQ1NEM2N0M0OEZCNTg0QiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCQUQ4QjdDOEI1OTcxMUUyQTQ1NEM2N0M0OEZCNTg0QiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MDk4MDExNzQwNzIwNjgxMTgyMkFCNjU2RjI3MzI4NzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MDk4MDExNzQwNzIwNjgxMTgyMkFCNjU2RjI3MzI4NzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7laVPZAAAAzUlEQVR42mJ88+EjAwkgFogrgFgSiAWAmBGIPwDxEyBuAeKVxBrESKLFIMV8OOTeALEorSz+T8g8Yg1iYhggMGrxgFksCM0mdLE4F4jfQlPsOyB+D2W/h8rRBICy0xcgzY1D/huaHFWzEzceea7RVD1q8WC0OAGIr0Kz6H+kLHoNJAfKTqRkEVLUfgZiHhzqvtLS4v+jiWvU4lGLRy0efhZ/xSP/A43/C4/az2j8n3jU/gJZ3IHFApilLWhiDTjUfseitgWHWpCDmgECDABG6z25EBsQTgAAAABJRU5ErkJggg==" />
15
      </div>
16
    </div>
17
  </div>
 
CSS 
body {
1
body {
2
  background: #2c3e50;
3
  margin: 0px;
4
}
5
.container {
6
  width: 100%;
7
  height: 100%;
8
  position: absolute;
9
  /*background: #ff0000;*/
10
 
11
}
12
.center_wrapper {
13
  width: 560px;
14
  height: 125px;
15
  /*background-color: #670000;*/
16
 
17
  position: absolute;
18
  left: 50%;
19
  top: 50%;
20
  margin: -90px 0px 0px -280px;
21
  padding: 20px 0px 20px 0px;
22
}
23
.img {
24
  margin-left: 35px;
25
  margin-top: 45px;
26
}
27
.note {
28
  position: relative;
29
  width: 100px;
30
  height: 125px;
31
  margin: auto 20px;
32
  color: #2c3e50;
33
  background: #97C02F;
34
  overflow: hidden;
35
  float: left;
36
}
37
.note:before {
38
  content: "";
39
  position: absolute;
40
  top: 0;
41
  right: 0;
42
  border-width: 0 16px 16px 0;
43
  border-style: solid;
44
  border-color: #2c3e50 #2c3e50 #658E15 #658E15;
45
  background: #658E15;
46
  /*-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
47
  -moz-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);
48
  box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);*/
49
 
50
  display: block;
51
  width: 0;
52
  /* Firefox 3.0 damage limitation */
53
 
54
}
55
.note.rounded {
56
  -webkit-border-radius: 5px 0 5px 5px;
57
  -moz-border-radius: 5px 0 5px 5px;
58
  border-radius: 5px 0 5px 5px;
59
}
60
.note.rounded:before {
61
  border-width: 12px;
62
  border-color: #2c3e50 #2c3e50 transparent transparent;
63
  -webkit-border-bottom-left-radius: 5px;
64
  -moz-border-radius: 0 0 0 5px;
65
  border-radius: 0 0 0 5px;
66
}
67
.note.red {
68
  background: #e74c3c;
69
}
70
.note.red:before {
71
  border-color: #2c3e50 #2c3e50 #c0392b #c0392b;
72
  background: #1f1f1f;
73
}
74
.note.yellow {
75
  background: #f1c40f;
76
}
77
.note.yellow:before {
78
  border-color: #2c3e50 #2c3e50 #f39c12 #f39c12;
79
  background: #f39c12;
80
}
81
.note.green {
82
  background: #1abc9c;
83
}
84
.note.green:before {
85
  border-color: #2c3e50 #2c3e50 #16a085 #16a085;
86
  background: #16a085;
87
}
88
.note.purple {
89
  background: #9b59b6;
90
}
91
.note.purple:before {
92
  border-color: #2c3e50 #2c3e50 #8e44ad #8e44ad;
93
  background: #8e44ad;
94
}
95
 
 

Flat File Icons (CSS)

CSSDeck G+