Ajax Loader
HTML 
<button class="arrow left">
1
<button class="arrow left">
2
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
3
    <polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
4
  45.63,75.8 0.375,38.087 45.63,0.375 "/>
5
  </svg>
6
</button>
7
<button class="arrow right">
8
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="80px" viewBox="0 0 50 80" xml:space="preserve">
9
    <polyline fill="none" stroke="#FFFFFF" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" points="
10
  0.375,0.375 45.63,38.087 0.375,75.8 "/>
11
  </svg>
12
</button>
 
CSS 
*{
1
*{
2
  margin: 0;
3
  padding: 0;
4
}
5
 
6
html,
7
body {
8
  height: 100%;
9
  overflow: hidden;
10
}
11
 
12
body {
13
  background: rgb(17,123,189);
14
}
15
 
16
button {
17
  -webkit-appearance: none;
18
  background: transparent;
19
  border: 0;
20
  outline:0;
21
}
22
 
23
svg {
24
  padding: 5px;
25
}
26
 
27
.arrow {
28
  cursor: pointer;
29
  position: absolute;
30
  top: 50%;
31
  margin-top: -45px;
32
  margin-left: -35px;
33
  width: 70px;
34
  height: 90px;
35
}
36
 
37
.left {
38
  left: 42%;
39
}
40
 
41
.right {
42
  left: 58%;
43
}
44
 
45
.left:hover polyline,
46
.left:focus polyline {
47
  stroke-width: 3;
48
}
49
 
50
.left:active polyline {
51
  stroke-width: 6;
52
  transition: all 100ms ease-in-out;
53
}
54
 
55
.right:hover polyline,
56
.right:focus polyline {
57
  stroke-width: 3;
58
}
59
 
60
.right:active polyline {
61
  stroke-width: 6;
62
  transition: all 100ms ease-in-out;
63
}
64
 
65
polyline {
66
  transition: all 250ms ease-in-out;
67
}
 

Arrow svg

CSSDeck G+