Make a lines orbiting around circle div - css

Question

i am trying to create animation that a few lines are rotating around circle div.
Something like this
http://prntscr.com/dxoe8o
this is my html & css
.outCircle {
width: 20px;
height: 20px;
background-color: lightblue;
left: 270px;
position: absolute;
top: 50px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
.duringTen {
-webkit-animation-duration: 5s;
}
.infinite {
-webkit-animation-iteration-count: infinite;
}
.linear {
-webkit-animation-timing-function: linear;
}
.counter {
width: 30px;
height: 30px;
-webkit-animation-duration: inherit;
-webkit-animation-direction: reverse;
-webkit-animation-timing-function: inherit;
-webkit-animation-iteration-count: inherit;
-webkit-animation-name: inherit;
}
.rotate {
width: 100%;
height: 100%;
-webkit-animation-name: circle;
position: relative;
z-index: 10;
display: block;
}
.inner {
width: 20px;
height: 2px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 100px;
position: absolute;
left: 0px;
top: 5px;
background-color: red;
display: block;
}
.red {
background: red;
}
.green {
background: green;
}
#keyframes circle {
from {
-webkit-transform: rotateZ(0deg)
}
to {
-webkit-transform: rotateZ(360deg)
}
}
<div class="outCircle">
<div class="rotate linear infinite duringTen">
<div class="counter">
<div class="inner">
</div>
</div>
</div>
</div>
My try is only with one line but i would like to create a few more lines like on the picture i posted above.
This is as far as i have come

Answer 1

Perhaps something like this:
.outCircle {
width: 20px;
height: 20px;
background-color: lightblue;
position: relative;
border-radius: 50%;
margin: 100px auto;
}
.marker {
width: 50px;
height: 2px;
position: absolute;
top: 50%;
left: 50%;
background: linear-gradient(to right, black, black 25%, transparent 25%, transparent 75%, black 75%);
transform: translate(-50%, -50%);
}
.vert {
width: 2px;
height: 50px;
background: linear-gradient(to bottom, black, black 25%, transparent 25%, transparent 75%, red 75%);
transform: translate(-50%, -50%);
}
.angle-1 {
transform: translate(-50%, -50%) rotate(45deg);
}
.angle-2 {
transform: translate(-50%, -50%) rotate(-45deg);
}
.inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
animation: circle 3s linear infinite;
}
#keyframes circle {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
<div class="outCircle">
<div class="inner">
<div class="marker horiz"></div>
<div class="marker vert"></div>
<div class="marker angle-1"></div>
<div class="marker angle-2"></div>
</div>
</div>
Note, this is quick and dirty...with a little time it could be simplified, perhaps by using pseudo-elements for some of the markers.
In general though, a SVG might be better.