I have created a circle animation and it works fine, however I am trying to change from solid lines to dotted lines, but I am wondering how to get it done, can somebody please suggest?

Here is how it looks right now:

```css
#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.outer-shadow, .inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.inner-shadow {
  top: 1px;
  left: 1px;
  width: 48px;
  height: 48px;
  margin-left: 0;
  margin-top: 0;
  border-radius: 100%;
  background-color: #ffffff;
}
.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 50px, 25px);
  border-radius: 100%;
  background-color: #fff;
}
.fill, .dot span {
  background-color: #f00;
}
.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}
@keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(180deg);
}
}
.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@keyframes right {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}
```

```html
<div id='loading'>
  <div class='outer-shadow'> </div>
  <div class='inner-shadow'> </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>
</div>
```