使用jQuery从右到左动画圆圈边框

Question

在以下html层次结构中.counter-box是一个用border-radius绘制的圆圈：

<div class="counter-box">
     <div class="result photos"><span class="count">14</span><span><br>Photos</span></div>
     <div class="result reduce"><span class="count">32</span>%<span><br>Smaller</span></div>
     <div class="result size"><span class="count">92</span>MB<span><br>Saving</span></div>
</div> 

我希望使用jQuery函数来设置从0到0的数字动画以达到3个数字并绘制边框。事情就是应该在相同的时间内发生。我设法使用以下简单的jQuery使三个数字一起工作：

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 1000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

但我仍然在绘制圆圈的边界时遇到麻烦。任何想法我可以在animate函数中使用什么来从右到左绘制边框，以完成绘制相同的时刻数字完成计数？这里是https://angular.io/api/common/NgIf#storing-conditional-result-in-a-variable来表示“绘制后”的寄宿生

$('.count').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 1000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
    }
  });
});

.counter-box {
  box-shadow: 0px 0px 0px 3px #16c7f3 inset;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  color: #FF;
  text-align: center;
  /* padding: 35px 22px; */
  margin: auto;
}

.count {
  display: inline-block;
}

span.unit {
  font-size: 20px;
}

.result {
  display: inline-block;
}

.size {
  width: 100%;
}

.result.photos,
.result.reduce {
  padding: 30px 25px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pie">
  <div class="counter-box">
    <div class="result photos"><span class="count">14</span><span><br>Photos</span></div>
    <div class="result reduce"><span class="count">32</span>%<span><br>Smaller</span></div>
    <div class="result size"><span class="count">92</span>MB<span><br>Saving</span></div>
  </div>
</div>