徐々に円を描くCSSアニメーションの作り方

徐々に円を描くCSSアニメーションの作り方がわかりません

CSSでこちらの画像のように時間が経つに連れて円ができていくアニメーションを作るにはどうすればいいでしょうか。(どうしようもない素人なのでタイマーの機能も併せて行った抱けるとありがたいです。)

loading時のcssは試しました。

HTML
1<div class="sk-fading-circle">
2  <div class="sk-circle1 sk-circle"></div>
3  <div class="sk-circle2 sk-circle"></div>
4  <div class="sk-circle3 sk-circle"></div>
5  <div class="sk-circle4 sk-circle"></div>
6  <div class="sk-circle5 sk-circle"></div>
7  <div class="sk-circle6 sk-circle"></div>
8  <div class="sk-circle7 sk-circle"></div>
9  <div class="sk-circle8 sk-circle"></div>
10  <div class="sk-circle9 sk-circle"></div>
11  <div class="sk-circle10 sk-circle"></div>
12  <div class="sk-circle11 sk-circle"></div>
13  <div class="sk-circle12 sk-circle"></div>
14</div>

CSS
1.sk-fading-circle {
2  margin: 100px auto;
3  width: 40px;
4  height: 40px;
5  position: relative;
6}
7
8.sk-fading-circle .sk-circle {
9  width: 100%;
10  height: 100%;
11  position: absolute;
12  left: 0;
13  top: 0;
14}
15
16.sk-fading-circle .sk-circle:before {
17  content: '';
18  display: block;
19  margin: 0 auto;
20  width: 15%;
21  height: 15%;
22  background-color: #333;
23  border-radius: 100%;
24  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
25          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
26}
27.sk-fading-circle .sk-circle2 {
28  -webkit-transform: rotate(30deg);
29      -ms-transform: rotate(30deg);
30          transform: rotate(30deg);
31}
32.sk-fading-circle .sk-circle3 {
33  -webkit-transform: rotate(60deg);
34      -ms-transform: rotate(60deg);
35          transform: rotate(60deg);
36}
37.sk-fading-circle .sk-circle4 {
38  -webkit-transform: rotate(90deg);
39      -ms-transform: rotate(90deg);
40          transform: rotate(90deg);
41}
42.sk-fading-circle .sk-circle5 {
43  -webkit-transform: rotate(120deg);
44      -ms-transform: rotate(120deg);
45          transform: rotate(120deg);
46}
47.sk-fading-circle .sk-circle6 {
48  -webkit-transform: rotate(150deg);
49      -ms-transform: rotate(150deg);
50          transform: rotate(150deg);
51}
52.sk-fading-circle .sk-circle7 {
53  -webkit-transform: rotate(180deg);
54      -ms-transform: rotate(180deg);
55          transform: rotate(180deg);
56}
57.sk-fading-circle .sk-circle8 {
58  -webkit-transform: rotate(210deg);
59      -ms-transform: rotate(210deg);
60          transform: rotate(210deg);
61}
62.sk-fading-circle .sk-circle9 {
63  -webkit-transform: rotate(240deg);
64      -ms-transform: rotate(240deg);
65          transform: rotate(240deg);
66}
67.sk-fading-circle .sk-circle10 {
68  -webkit-transform: rotate(270deg);
69      -ms-transform: rotate(270deg);
70          transform: rotate(270deg);
71}
72.sk-fading-circle .sk-circle11 {
73  -webkit-transform: rotate(300deg);
74      -ms-transform: rotate(300deg);
75          transform: rotate(300deg); 
76}
77.sk-fading-circle .sk-circle12 {
78  -webkit-transform: rotate(330deg);
79      -ms-transform: rotate(330deg);
80          transform: rotate(330deg); 
81}
82.sk-fading-circle .sk-circle2:before {
83  -webkit-animation-delay: -1.1s;
84          animation-delay: -1.1s; 
85}
86.sk-fading-circle .sk-circle3:before {
87  -webkit-animation-delay: -1s;
88          animation-delay: -1s; 
89}
90.sk-fading-circle .sk-circle4:before {
91  -webkit-animation-delay: -0.9s;
92          animation-delay: -0.9s; 
93}
94.sk-fading-circle .sk-circle5:before {
95  -webkit-animation-delay: -0.8s;
96          animation-delay: -0.8s; 
97}
98.sk-fading-circle .sk-circle6:before {
99  -webkit-animation-delay: -0.7s;
100          animation-delay: -0.7s; 
101}
102.sk-fading-circle .sk-circle7:before {
103  -webkit-animation-delay: -0.6s;
104          animation-delay: -0.6s; 
105}
106.sk-fading-circle .sk-circle8:before {
107  -webkit-animation-delay: -0.5s;
108          animation-delay: -0.5s; 
109}
110.sk-fading-circle .sk-circle9:before {
111  -webkit-animation-delay: -0.4s;
112          animation-delay: -0.4s;
113}
114.sk-fading-circle .sk-circle10:before {
115  -webkit-animation-delay: -0.3s;
116          animation-delay: -0.3s;
117}
118.sk-fading-circle .sk-circle11:before {
119  -webkit-animation-delay: -0.2s;
120          animation-delay: -0.2s;
121}
122.sk-fading-circle .sk-circle12:before {
123  -webkit-animation-delay: -0.1s;
124          animation-delay: -0.1s;
125}
126
127@-webkit-keyframes sk-circleFadeDelay {
128  0%, 39%, 100% { opacity: 0; }
129  40% { opacity: 1; }
130}
131
132@keyframes sk-circleFadeDelay {
133  0%, 39%, 100% { opacity: 0; }
134  40% { opacity: 1; } 
135}