You need to divide by 2 every values involved, even the clip(); ones (fiddle updated)

#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%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.inner-shadow {
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  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, 50px, 50px, 25px);
  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, 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;
}

<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>

edit: in respond to comment @Filipe

How would the change from clip to clip-path be? I tried (also changing rect to inset), but the animation stops working.

Possible example with clip-path instead clip .

#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%;
  box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.inner-shadow {
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  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-path: polygon(50% 0, 0 0, 0 100%, 50% 100%);
  border-radius: 100%;
  background-color: #fff;
}

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

.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

.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;
}

<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>

A way of making the border of an element looking animated is to gradually unveil the borders in turn by gradually shrinking a 5px wide (or high depending on which border) 100% wide element that is overlaying each border.

This snippet does this by animating the after pseudo element on the element and at the same time putting one border after another into the required final color.

You can put the class movingBorder from this snippet onto other elements to get the moving border effect.

.movingBorder {
  width: 60vw;
  height: 60vh;
  border: solid 5px lime;
  position: relative;
  background: pink;
  animation: changeBorders 5s linear;
}

@keyframes changeBorders {
  0% {
    border: solid 5px white;
    border-left: solid 5px lime;
  }
  25% {
    border: solid 5px white;
    border-left: solid 5px lime;
  }
  25.02% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
  }
  50% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
  }
  50.02% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
    border-right: solid 5px lime;
  }
  75% {
    border: solid 5px white;
    border-left: solid 5px lime;
    border-bottom: solid 5px lime;
    border-right: solid 5px lime;
  }
  75.02% {
    border: solid 5px lime;
  }
}

.movingBorder::after {
  width: 5px;
  background-color: white;
  height: 0px;
  position: absolute;
  bottom: 0;
  left: -5px;
  z-index: 1;
  animation: movedown 5s linear;
  animation-fill-mode: forwards;
  content: '';
  display: inline-block;
}

@keyframes movedown {
  0% {
    height: calc(100% + 10px);
    width: 5px;
    bottom: -5px;
    left: -5px;
  }
  25% {
    height: 5px;
    width: 5px;
    bottom: -5px;
    left: -5px;
  }
  25.01% {
    height: 5px;
    width: calc(100% + 10px);
    bottom: -5px;
    left: -5px;
  }
  50% {
    height: 5px;
    width: 0%;
    left: 100%;
    bottom: -5px;
  }
  50.01% {
    height: calc(100% + 10px);
    width: 5px;
    left: 100%;
    bottom: -5px;
  }
  75% {
    height: 0;
    width: 5px;
    left: 100%;
    bottom: 100%;
  }
  75.01% {
    height: 5px;
    width: calc(100% + 10px);
    left: 0%;
    bottom: 100%;
  }
  99.01% {
    height: 5px;
    width: 0;
    left: 0;
    bottom: 100%;
  }
}

<div class="movingBorder" style="background: pink; width: 60vw; height: 60vh;"></div>

UPDATE: the above works for a square border but the requirement was for a border with radius set. This snippet puts an after element over the border (which is on the before pseudo element) which has this shape initially:

This moves left gradually revealing the top part of the lime border. Then the left part is set to transparent and the pseudo element moved right, gradually revealing the bottom part of the border.

NOTE: run this snippet in Full page to see the effect. The animation delays for 10 seconds so you have time to do that (otherwise the animation has finished before you've got there).

* {
  margin: 0px;
  padding: 0px;
  list-style: none;
  border: none;
  text-decoration: none;
  outline: none;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: 1;
}

:-ms-input-placeholder {
  color: inherit;
  opacity: 1;
}

::placeholder {
  color: inherit;
  opacity: 1;
}

html,
body {
  height: 100%;
}

.col-lg- {}

.col-md- {}

.col-sm- {}

.col- {}

.img-fluid {}

.container-fluid {}

.justify-content-center {}

.row {}

.my-auto {}

.p0 {}

.container {
  width: 100%;
  max-width: 1170px;
}

.container-fluid {
  width: 100%;
  max-width: 1440px;
}

@media (max-width: 1199px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}


/*** ### Section One ### ***/

.section-one {
  position: relative;
  background: #ffffff;
}

.section-one h2 {
  color: #000000;
  font-size: 32px;
  margin: 0px 0px 10px 0px;
  padding: 0px;
  font-family: "AzoSans-Medium";
}

.section-one p {
  color: #000000;
  font-size: 16px;
  margin: 10px 0px;
  padding: 0px;
  font-family: "AzoSans-Regular";
}

.section-one .boxes {
  position: relative;
  margin-top: 75px;
}

.section-one .boxes:last-child {
  margin-bottom: 100px;
}

.section-one .boxes .left-box {
  position: relative;
  margin: 25px 0px 0px 0px;
  z-index: 3;
}

.section-one .boxes .left-box img {
  width: 100%;
}

.section-one .boxes .right-box {
  position: relative;
  margin: 25px 0px 0px 0px;
  height: 100%;
  z-index: 2;
}

.section-one .boxes .right-box:before,
.section-one .boxes .right-box::after {
  position: absolute;
  content: "";
  top: 50px;
  left: -30px;
  right: 0px;
  bottom: 25px;
  z-index: -2;
  /* so we can have another pseudo element overlaying it */
}

.section-one .boxes .right-box:before {
  border: 1px solid lime;
}

.section-one .boxes .right-box.left h2 {
  text-align: left;
}

.section-one .boxes .right-box.left:before,
.section-one .boxes .right-box.left::after {
  left: 0px;
  right: -30px;
}

.section-one .boxes .right-box.left:before {
  border-right: none;
  border-radius: 250px 0px 0px 250px;
}

.section-one .boxes .right-box::after {
  width: 200%;
  height: 100%;
}

.section-one .boxes .right-box.left::after {
  background-position: 0 0, 100% 75%;
  background-size: calc(50% + 30px) 100%, 50% 50%;
  background-repeat: no-repeat no-repeat, no-repeat no-repeat;
  background-image: linear-gradient(white, white), linear-gradient(white, white);
  animation: left 10s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 10s;
  /* just to give time to go full screen on SO snippet! */
}

@keyframes left {
  0% {
    background-image: linear-gradient(white, white), linear-gradient(white, white);
    transform: translateX(0);
  }
  49.99% {
    background-image: linear-gradient(white, white), linear-gradient(white, white);
  }
  50% {
    background-image: linear-gradient(transparent, transparent), linear-gradient(white, white);
    transform: translateX(-50%);
  }
  99.99% {
    background-image: linear-gradient(transparent, transparent), linear-gradient(white, white);
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.section-one .boxes .right-box.right h2 {
  text-align: right;
}

.section-one .boxes .right-box.right:before {
  border-left: none;
  border-radius: 0px 250px 250px 0px;
}

.section-one .boxes .right-box h2 {
  padding: 50px 0px 20px 0px;
}

.section-one .boxes .right-box p {
  display: block;
  margin: 15px auto;
  width: 100%;
  max-width: 355px;
  text-align: justify;
}

.section-one .boxes .action-btn {
  position: relative;
  text-align: right;
}

@media (max-width: 1199px) {
  .section-one h2 {
    font-size: 28px;
  }
  .section-one p {
    font-size: 15px;
  }
  .section-one .boxes {
    position: relative;
    margin-top: 50px;
  }
  .section-one .boxes:last-child {
    margin-bottom: 75px;
  }
  .section-one .boxes .right-box:before {
    left: -30px;
  }
  .section-one .boxes .right-box.left h2 {
    text-align: left;
  }
  .section-one .boxes .right-box.left:before {
    border-radius: 200px 0px 0px 200px;
  }
  .section-one .boxes .right-box.right h2 {
    text-align: left;
  }
  .section-one .boxes .right-box.right:before {
    border-radius: 0px 200px 200px 0px;
  }
  .section-one .boxes .right-box h2 {
    padding: 50px 0px 15px 0px;
  }
  .section-one .boxes .right-box p {
    display: block;
    margin: 15px auto;
    width: 100%;
    max-width: 355px;
    text-align: justify;
  }
  .section-one .boxes .action-btn {
    position: relative;
    text-align: right;
  }
}

@media (max-width: 991px) {
  .section-one h2 {
    font-size: 25px;
  }
  .section-one .boxes {
    position: relative;
    margin-top: 10px;
  }
  .section-one .boxes:last-child {
    margin-bottom: 30px;
  }
  .section-one .boxes .right-box:before {
    display: none;
  }
  .section-one .boxes .right-box.right:before {
    display: none;
  }
  .section-one .boxes .right-box h2 {
    padding: 0px 0px 15px 0px;
    margin: 0px;
  }
  .section-one .boxes .right-box p {
    display: block;
    margin: 0px auto 15px auto;
    width: 100%;
    max-width: 100%;
    text-align: justify;
  }
  .section-one .boxes .action-btn {
    position: relative;
    text-align: right;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<section class="section-one">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="boxes">
          <div class="row">
            <div class="col-lg-6 aos-init" data-aos="zoom-in-right" data-aos-duration="800">
              <div class="right-box left">
                <h2>Heading1.</h2>
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in erat et quam semper convallis. Phasellus vel nisl id leo suscipit molestie. Sed nec dignissim urna. Donec sit amet tortor nulla. Etiam tempus dui id ipsum commodo, et laoreet tortor luctus.
                  Ut dapibus.
                </p>
              </div>
            </div>
            <div class="col-lg-6 aos-init" data-aos="zoom-in-left" data-aos-duration="800">
              <div class="left-box">
                <img src="https://via.placeholder.com/650x430" class="img-fluid" alt="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Obviously equivalent CSS has to be added for when the text is to the right of the image.

There is a very easy to follow, informative and detailed tutorial on exactly how to achieve this (and more) by Anders Ingemann, which can be found here.

Its a fairly complex operation- so I'll simply distil the final stage from the tutorial here

Demo Fiddle

HTML

<div class="radial-progress">
    <div class="circle">
        <div class="mask full">
            <div class="fill"></div>
        </div>
        <div class="mask half">
            <div class="fill"></div>
            <div class="fill fix"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="inset"></div>
</div>

CSS/LESS

.radial-progress {
    @circle-size: 120px;
    @circle-background: #d6dadc;
    @circle-color: #97a71d;
    @inset-size: 90px;
    @inset-color: #fbfbfb;
    @transition-length: 1s;
    @shadow: 6px 6px 10px rgba(0, 0, 0, 0.2);
    margin: 50px;
    width: @circle-size;
    height: @circle-size;
    background-color: @circle-background;
    border-radius: 50%;
    .circle {
        .mask, .fill, .shadow {
            width: @circle-size;
            height: @circle-size;
            position: absolute;
            border-radius: 50%;
        }
        .shadow {
            box-shadow: @shadow inset;
        }
        .mask, .fill {
            -webkit-backface-visibility: hidden;
            transition: -webkit-transform @transition-length;
            transition: -ms-transform @transition-length;
            transition: transform @transition-length;
        }
        .mask {
            clip: rect(0px, @circle-size, @circle-size, @circle-size/2);
            .fill {
                clip: rect(0px, @circle-size/2, @circle-size, 0px);
                background-color: @circle-color;
            }
        }
    }
    .inset {
        width: @inset-size;
        height: @inset-size;
        position: absolute;
        margin-left: (@circle-size - @inset-size)/2;
        margin-top: (@circle-size - @inset-size)/2;
        background-color: @inset-color;
        border-radius: 50%;
        box-shadow: @shadow;
    }
}

Example jQuery (could be substituted with CSS)

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();
var transform_styles = ['-webkit-transform', '-ms-transform', 'transform'];
window.randomize = function () {
    var rotation = Math.floor(Math.random() * 180);
    var fill_rotation = rotation;
    var fix_rotation = rotation * 2;
    for (i in transform_styles) {
        $('.circle .fill, .circle .mask.full').css(transform_styles[i], 'rotate(' + fill_rotation + 'deg)');
        $('.circle .fill.fix').css(transform_styles[i], 'rotate(' + fix_rotation + 'deg)');
    }
}
setTimeout(window.randomize, 200);
$('.radial-progress').click(window.randomize);

If I understand your question you want to animate the border-width of the element, maybe the border-top-width, but I don't think that will create the effect that you are looking for, increasing the border will only push the element as much as the border width gets set to, it won't look like if the element is being filled, you can animate a nested element that will cover the outer element, you can check this example to see what I'm saying

The HTML:

<style>
#theBorderDiv, #theTwoDivs { 
 display: inline-block;
background-color: #CCC;
height: 0px;
width: 300px;
border-top-color: red;
border-top-style: solid;
border-top-width: 1px;
height: 200px;
vertical-align: top;
}

#theTwoDivs{
  margin-top: 200px;
  position: relative;
}

#theInnerDiv
{
  position: absolute;
  top:0px;
  height: 0px;
  width: 300px;
  background-color: red;
}    
</style>
<div id="theBorderDiv"></div>

<div id="theTwoDivs">    
 <div id="theInnerDiv"></div>
</div>

The javascript:

 <script type="text/javascript">        
    $('#theBorderDiv').animate({borderTopWidth:200},1000)
    $('#theInnerDiv').animate({height:200},1000)
</script>

One way you can do this is to animate the stroke-offset of a path. I've included sample code using a circle path. Depending on how big your element is you will need to change your dasharray and dashoffset values.

svg {
  fill: #eee;
  overflow: visible;
  transform-origin:50% 50%;
  transform: rotate(-90deg);
}
.path {
  stroke: blue;
  stroke-width: 4;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation: borderblueanim 2s infinite;
  
}

@keyframes borderblueanim {
  from {
    stroke-dashoffset: 800;
  }
  to {
    stroke-dashoffset: 0;
  }
}

<svg width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<circle class="path" cx="100" cy="100" r="100"/>
</svg>