CSS Kreis Rand füllen animation

Habe ich eine css-Datei, welche macht die Kreis-Grenze füllen animation perfekt. Seine in 100 Pixel Breite und Höhe. Aber ich brauche nur in 50 Pixel Breite und Höhe Kreis mit der gleichen animation. Ich habe versucht, viele Male die Größe zu minimieren, aber der Kreis nicht richtig fix mit animation. bitte helfen Sie mir, kleiner Kreis.
Mein Bedürfnis:
Breite-50px
In der Höhe 50px
border Größe wie pro die image-Datei angehängt -Kreis Grenze füllen Beispiel-Bild

Mein code

#loading
{   
  width: 100px;  
  height: 100px;  
  margin: 30px auto;
  position: relative;
}

.outer-shadow, .inner-shadow
{
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.inner-shadow 
{
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -40px;
  border-radius: 100%;
  background-color: #ffffff;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.hold 
{
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 100px, 100px, 50px);
  border-radius: 100%;
  background-color: #fff;
}

.fill, .dot span 
{
  background-color: #f50;
}

.fill 
{
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 50px, 100px, 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);}
}

Mein code in jsfiddle...!

InformationsquelleAutor ArunValaven | 2016-02-13