title: CSS circle border fill animation
body: <p>I have a css file which makes circle border fill animation perfectly. Its in 100px width and height. But i need only in 50px width and height circle with the same animation. I tried many more times to minimize the size, but the circle not get correctly fix with animation. please help me to smaller this circle.
  My need:
  Width-50px
  Height -50px
  border size as per the image file attached -<a href="https://i.stack.imgur.com/MRqjm.jpg" rel="nofollow noreferrer">circle border fill sample image</a></p>
  <blockquote>
  <h1>My code</h1>
  </blockquote>
  <pre><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);}
  }
  </code></pre>
  <p>My code in <a href="https://jsfiddle.net/arunvalaven/rsfkmegp/" rel="nofollow noreferrer">jsfiddle</a>...!</p>