Ajax Loader
HTML 
<div class="wrapper">
1
<div class="wrapper">
2
  <div class="pie spinner"></div>
3
  <div class="pie filler"></div>
4
  <div class="mask"></div>
5
</div>
 
CSS 
/* Variables : your settings */
1
/* Variables : your settings */
2
 
3
$animation-duration : 10s;
4
$size : 250px; /* Any unit */
5
$background-color : #08C; /* No gradients */
6
$border: 5px solid #232323; /* Set "none" if you don't want */
7
$hover-play-state : paused; /* Set "running" if you don't want to pause the animation on hover */
8
$demo-content-display : none; /* Set "block" to see we can make content on the spinner and watch it rotates */
9
 
10
 
11
 
12
/* Don't change anything below this point */
13
 
14
* { box-sizing:border-box; }
15
 
16
.wrapper {
17
  width:$size;
18
  height:$size;
19
  margin:40px auto;
20
  position:relative;
21
  background:white;
22
}
23
 
24
.pie {
25
  width: 50%;
26
  height: 100%;
27
  transform-origin: 100% 50%;
28
  position: absolute;
29
  background: $background-color;
30
  border: $border;
31
}
32
 
33
.spinner {
34
  border-radius: 100% 0 0 100% / 50% 0 0 50%;
35
  z-index: 200;
36
  border-right:none;
37
  animation: rota $animation-duration linear infinite;
38
}
39
 
40
.wrapper:hover .spinner,
41
.wrapper:hover .filler,
42
.wrapper:hover .mask {
43
    animation-play-state: $hover-play-state;  
44
}
45
 
46
.spinner:after {
47
    position:absolute;
48
    width:10px;
49
    height:10px;
50
    background:#fff;
51
    border:1px solid rgba(0,0,0,0.5);
52
    box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
53
    border-radius:50%;
54
    top:10px;
55
    right:10px;  
56
    content:"";
57
    display: $demo-content-display;
58
}
59
 
60
.filler {
61
  border-radius: 0 100% 100% 0 / 0 50% 50% 0;
62
  left: 50%;
63
  opacity: 0;
64
  z-index: 100;
65
  animation: fill $animation-duration steps(1,end) infinite;
66
  border-left: none;
67
}
68
 
69
.mask {
70
  width: 50%;
71
  height: 100%;
72
  position: absolute;
73
  background: inherit;
74
  opacity: 1;
75
  z-index: 300;
76
  animation: mask $animation-duration steps(1,end) infinite;
77
}
78
 
79
@keyframes rota {
80
  0% { transform: rotate(0deg); }
81
  100% { transform: rotate(360deg); }
82
}
83
 
84
@keyframes mask {
85
  0% { opacity: 1; }
86
  50%, 100% { opacity: 0; }
87
}
88
 
89
@keyframes fill {
90
  0% { opacity: 0; }
91
  50%, 100% { opacity: 1; }
92
}
 

Pure CSS pie timer

CSSDeck G+