Ajax Loader
HTML 
<div>
1
<div>
2
  <form>
3
    <input type="text" required>
4
    <input type="reset" value="x">
5
  </form>
6
</div>
 
CSS 
div {
1
div {
2
  text-align: center;
3
}
4
 
5
form {
6
  position: relative;
7
  display: inline-block;
8
  margin: 20px auto;
9
}
10
 
11
input {  outline: none }
12
input[type="text"] {
13
  -moz-box-sizing: content-box;
14
  -webkit-box-sizing: content-box;
15
  box-sizing: content-box;
16
  background: white;
17
  -webkit-border-radius: 20px;
18
  -moz-border-radius: 20px;
19
  border-radius: 20px;
20
  height: 20px;
21
  border: 1px solid rgba(0,0,0,0.2);
22
  width: 170px;
23
  padding: 3px 23px 3px 8px;
24
}
25
 
26
input[type="reset"] {
27
  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAGFBMVEUAAAC/v7+/v7+/v7+/v7+/v7+/v7+/v7+hAPa4AAAAB3RSTlMAQNCwkKDgPaU3lgAAAEZJREFUeNplj9EKACAIA2dm+/8/bkj4sI6wDsIpRCRFBprNxx4bD12LrwRSDxRZkCcoCqVDIW1v+9Q+W6sOOhNkY9iQtsIFhO0DtcbsWN0AAAAASUVORK5CYII=');
28
  width: 14px;
29
  height: 14px;
30
  -webkit-border-radius: 8px;
31
  -moz-border-radius: 8px;
32
  border-radius: 8px;
33
  border: 0;
34
  text-indent: -999px;
35
  position: absolute;
36
  right: 8px;
37
  top: 7px;
38
  cursor: pointer;
39
}
40
 
41
input[type="text"]:invalid {
42
  outline: none;
43
  -webkit-box-shadow: none;
44
  -moz-box-shadow: none;
45
  box-shadow: none;
46
  background: white url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAAAIVBMVEW/v7+/v78AAAC/v7+/v7+/v7+/v7+/v7+/v7+/v7+/v79QUkolAAAAC3RSTlOLYAAJeoMjRhpOcbsbtd4AAABJSURBVHjaVc1JDsAgDATB9uAF8v8Hx0QcSN9KssZI5eClDj18PRsFlmlQDcfUGd6A3EgYP1xncQ+sa5qYOk9jRQt1Y0izhU5bL2o2AW3ZQKeJAAAAAElFTkSuQmCC) 10px 6px no-repeat;
47
}
48
input[type="text"]:invalid + input[type="reset"] {
49
  visibility:hidden;
50
}
 

Search Bar that You Must See

CSSDeck G+