Ajax Loader
HTML 
<div class="slider">
1
<div class="slider">
2
    <ul class="frames">
3
        <li id="one" class="slide">
4
            <img src="http://lorempixel.com/450/250/animals" alt="Slide 1">
5
            <nav>
6
                <a class="prev" href="#five">&larr;</a>
7
                <a class="next" href="#two">&rarr;</a>
8
            </nav>          
9
        </li>
10
        <li id="two" class="slide">
11
            <img src="http://lorempixel.com/450/250/sports" alt="Slide 2">
12
            <nav>
13
                <a class="prev" href="#one">&larr;</a>
14
                <a class="next" href="#three">&rarr;</a>
15
            </nav>          
16
        </li>
17
        <li id="three" class="slide">
18
            <img src="http://lorempixel.com/450/250/nature" alt="Slide 3">
19
            <nav>
20
                <a class="prev" href="#two">&larr;</a>
21
                <a class="next" href="#four">&rarr;</a>
22
            </nav>          
23
        </li>
24
        <li id="four" class="slide">
25
            <img src="http://www.lorempixel.com/450/250/food" alt="Slide 4">
26
            <nav>
27
                <a class="prev" href="#three">&larr;</a>
28
                <a class="next" href="#five">&rarr;</a>
29
            </nav>          
30
        </li>
31
        <li id="five" class="slide">
32
            <img src="http://lorempixel.com/450/250/animals" alt="Slide 5">
33
            <nav>
34
                <a class="prev" href="#four">&larr;</a>
35
                <a class="next" href="#one">&rarr;</a>
36
            </nav>          
37
        </li>
38
        <li class="quicknav">
39
            <ul>
40
                <li><a href="#one"></a></li>
41
                <li><a href="#two"></a></li>
42
                <li><a href="#three"></a></li>
43
                <li><a href="#four"></a></li>
44
                <li><a href="#five"></a></li>
45
            </ul>
46
        </li>
47
    </ul>
48
</div>
 
CSS 
* {
1
* {
2
    margin: 0;
3
    padding: 0;
4
    /*transition*/
5
    -webkit-transition: all 1s ease;
6
    -moz-transition: all 1s ease;
7
    -o-transition: all 1s ease;
8
    transition: all 1s ease;
9
}
10
body {
11
    background: -webkit-radial-gradient(center, circle, #f0f0f0, #74a9ad);
12
    background: -moz-radial-gradient(center, circle, #f0f0f0, #74a9ad);
13
    background: -ms-radial-gradient(center, circle, #f0f0f0, #74a9ad);
14
    background: -o-radial-gradient(center, circle, #f0f0f0, #74a9ad);
15
    background: radial-gradient(center, circle, #f0f0f0, #74a9ad);
16
    padding: 50px;
17
}
18
/* Slider */
19
.slider {
20
    height: 250px;
21
    left: 50%;
22
    margin: -125px -225px;
23
    position: absolute;
24
    top: 48%;
25
    width: 450px;
26
    /*box-shadow*/
27
    -webkit-box-shadow: 0 0 5px #000;
28
    -moz-box-shadow: 0 0 5px #000;
29
    box-shadow: 0 0 5px #000;
30
}
31
.slider .frames {
32
    height: 250px;
33
    position: relative;
34
}
35
.slider .frames .slide {
36
    height: 250px;
37
    list-style: none;
38
    position: absolute;
39
    width: 450px;
40
}
41
.slider .slide:target { z-index: 100 }
42
.slider .frames .slide img {
43
    height: 250px;
44
    width: 450px;
45
}
46
.slider .frames .slide nav a {
47
    background: hsla(0,0%,0%,.75);
48
    color: #fff;
49
    font-size: 16px;
50
    line-height: 50px;
51
    margin-top: -25px;
52
    opacity: 0;
53
    position: absolute;
54
    text-align: center;
55
    text-decoration: none;
56
    top: 50%;
57
    width: 50px;
58
    visibility: hidden;
59
    z-index: 10;
60
}
61
.slider:hover .frames .slide nav a {
62
    opacity: 1;
63
    visibility: visible;
64
}
65
.slider .frames .slide nav .prev {
66
    /*border-radius*/
67
    -webkit-border-radius: 0 25px 25px 0;
68
    -moz-border-radius: 0 25px 25px 0;
69
    border-radius: 0 25px 25px 0;
70
    left: 0;
71
}
72
.slider .frames .slide nav .next {
73
    /*border-radius*/
74
    -webkit-border-radius: 25px 0 0 25px;
75
    -moz-border-radius: 25px 0 0 25px;
76
    border-radius: 25px 0 0 25px;
77
    right: 0;
78
}
79
.slider .frames .slide nav a:hover { background: #000 }
80
.slider .quicknav {
81
    bottom: 0;
82
    font-size: 0;
83
    opacity: 0;
84
    position: absolute;
85
    text-align: center;
86
    width: 100%;
87
    z-index: 100;
88
}
89
.slider:hover .quicknav { opacity: .9 }
90
.slider .quicknav li { display: inline-block }
91
.slider .quicknav a {
92
    background: hsla(0,0%,100%,.9);
93
    border: 1px solid hsla(0,0%,0%,.9);
94
    /*border-radius*/
95
    -webkit-border-radius: 100%;
96
    -moz-border-radius: 100%;
97
    border-radius: 100%;
98
    display: block;
99
    height: 10px;
100
    margin: 10px 5px;
101
    text-decoration: none;
102
    width: 10px;
103
}
104
.slider .quicknav a:hover { background: hsla(0,0%,50%,.9) }
105
.slider #one:target ~ .quicknav a[href="#one"], .slider #two:target ~ .quicknav a[href="#two"], .slider #three:target ~ .quicknav a[href="#three"], .slider #four:target ~ .quicknav a[href="#four"], .slider #five:target ~ .quicknav a[href="#five"] {
106
    background: hsla(0,0%,0%,.9);
107
    border-color: hsla(0,0%,100%,.9);
108
    background: rgb(244,246,245);
109
    /*linear-gradient*/
110
    background: -webkit-gradient(linear,left top,left bottom,color-stop(rgba(244,246,245,1),0.01),color-stop(rgba(203,219,219,1),1),color-stop(rgba(216,216,216,1),1));
111
    background: -webkit-linear-gradient(top, rgba(244,246,245,1) 1%, rgba(203,219,219,1) 100%, rgba(216,216,216,1) 100%);
112
    background: -moz-linear-gradient(top, rgba(244,246,245,1) 1%, rgba(203,219,219,1) 100%, rgba(216,216,216,1) 100%);
113
    background: -o-linear-gradient(top, rgba(244,246,245,1) 1%, rgba(203,219,219,1) 100%, rgba(216,216,216,1) 100%);
114
    background: linear-gradient(top, rgba(244,246,245,1) 1%, rgba(203,219,219,1) 100%, rgba(216,216,216,1) 100%);
115
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(244,246,245,1)), color-stop(100%,rgba(203,219,219,1)), color-stop(100%,rgba(216,216,216,1)));
116
    background: -webkit-linear-gradient(top, rgba(244,246,245,1) 1%,rgba(203,219,219,1) 100%,rgba(216,216,216,1) 100%);
117
    background: -moz-linear-gradient(top, rgba(244,246,245,1) 1%,rgba(203,219,219,1) 100%,rgba(216,216,216,1) 100%);
118
    background: -o-linear-gradient(top, rgba(244,246,245,1) 1%,rgba(203,219,219,1) 100%,rgba(216,216,216,1) 100%);
119
    background: linear-gradient(top, rgba(244,246,245,1) 1%,rgba(203,219,219,1) 100%,rgba(216,216,216,1) 100%);
120
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4f6f5', endColorstr='#d8d8d8',GradientType=0 );
121
    /*box-shadow*/
122
    -webkit-box-shadow: inset 0 0 3px #000,0 0 2px rgba(0,0,0,.5),0 2px 3px #666;
123
    -moz-box-shadow: inset 0 0 3px #000,0 0 2px rgba(0,0,0,.5),0 2px 3px #666;
124
    box-shadow: inset 0 0 3px #000,0 0 2px rgba(0,0,0,.5),0 2px 3px #666;
125
}
 

Pure css slider - (:target)

CSSDeck G+