Ajax Loader
HTML 
<h1>The road so far</h1>
1
<h1>The road so far</h1>
2
 
3
<br>
4
 
5
<h1 class="year">2010</h1>
6
 
7
<div class="arrow">
8
  <div class="head"></div>
9
</div>
10
 
11
<h1 class="year right">2014</h1>
12
 
13
 
14
 
15
<h3 class="neatnait-love">
16
  made with love at
17
  @<a href="http://neatnait.com">neatnait</a>
18
</h3>
 
CSS 
@import url(http://fonts.googleapis.com/css?family=Raleway:200,400);
1
@import url(http://fonts.googleapis.com/css?family=Raleway:200,400);
2
@import url(http://fonts.googleapis.com/css?family=Roboto:300);
3
 
4
 
5
body{
6
  padding:5%;
7
  background:#323139;
8
  color:white;
9
}
10
 
11
 
12
h1{
13
  font-family: 'Raleway', sans-serif;
14
  font-weight:200;
15
}
16
 
17
h1.year{
18
  font-weight:400;
19
}
20
 
21
.right{
22
  float:right;
23
  text-align:right;
24
  margin-right:-8px;
25
}
26
 
27
.arrow{
28
  margin-top:1em;
29
  border:2px solid #f06;
30
  position:relative;
31
  background:#f06;
32
  width:0%;
33
  animation:grow 3s ease forwards;
34
}
35
 
36
/*left dot*/
37
.arrow:before{
38
  content:"";
39
  border:4px solid #f06;
40
  border-radius:50%;
41
  position:absolute;
42
  top:-4px;
43
  left:-4px;
44
}
45
 
46
.arrow .head, .arrow .head:after{
47
  border:2px solid #f06;
48
  border-radius:2px;
49
  width:8px;
50
  position:absolute;
51
  right:-7px;
52
  top:1px;
53
  transform:rotate(-45deg);
54
}
55
 
56
.arrow .head:after{
57
  content:"";
58
  border-color:#FFA0C6;
59
  right:-6px;
60
  top:-6px;
61
  transform:rotate(90deg);
62
}
63
 
64
@keyframes grow{
65
  to{
66
    width:100%;
67
  }
68
}
69
 
70
.neatnait-love{
71
  box-sizing:border-box;
72
  width:250px;
73
  margin:auto;
74
  margin-top:15em;
75
  font-weight:300;
76
  font-family: 'Roboto', sans-serif;
77
  text-shadow:0 5px 20px #000;
78
  color:white;
79
  background:#111;
80
  padding:2em 6em 2em 4em;
81
  position:relative;
82
  bottom:10%;
83
  left:50%;
84
  margin-left:-125px;
85
}
86
 
87
a{
88
  text-decoration:none;
89
  color:#f06;
90
  border-bottom:1px solid white;
91
  padding-bottom:5px;
92
  transition:border .5s ease;
93
}
94
 
95
a:hover{
96
  border-color:#111;
97
  color:#f06;
98
  border-bottom:4px solid white;
99
}
 

NeatNait css growing arrow

CSSDeck G+