如何添加循环进度条来引导转盘？

Question

我正在使用GSAP库进行bootstrap 4轮播定制。基于使用GSAP tweenmax动画库的数据间隔，如何在数据目标处于活动状态时添加循环进度条到引导轮播？除了我在这里所做的以外，还有其他替代解决方案吗？这是我的代码

TweenMax.to(document.querySelector('.loading'), 10, {
        attr: { 'stroke-dashoffset': 0 },
        ease: Sine.easeInOut,
        repeat: -1,
        yoyo: false
    });

.wrapper{
  height:500px;
}

.carousel-indicators {
    list-style: none;
}

.carousel-indicators li,
.carousel-indicators li.active {
    width: 70px !important;
    height: 70px !important;
    background-color: #fff;
    position: relative;
    margin: 10px;
    border-radius: 50%;
}

.carousel-indicators img {
    position: absolute;
    width: 100%;
    border-radius: 50%;
    height: 100%;
    top: 0;
    left: 0;
    padding: 10px;
}


.carousel-indicators li.active .loader{
  display: block;
}

.carousel-indicators li .loader {
  display: none;
}
svg {
  position: absolute;
  left: 50%;
  top: 80%;
  transform: translate(-50%,-50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div class="wrapper">
  <div class="container-fluid">
  <div class="row">
    <div class="col-md-12">
      <div id="carouselExampleIndicators" class="carousel slide" data-interval="5000" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">
                <div class="loader">
                    <svg xmlns="http://www.w3.org/2000/svg" width="130" height="130">
                        <circle class="loading" fill="none" stroke="#fff" stroke-width="10" stroke-dasharray="377" stroke-dashoffset="377" cx="65" cy="65" r="60" transform="rotate(-90 65 65)" />
                        <circle fill="none" stroke="#fff" stroke-width="3" cx="65" cy="65" r="60" />
                    </svg>
                </div>
                <img src=" http://placehold.it/70x70" alt="..." class="one">
            </li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1">
                <div class="loader">
                    <svg xmlns="http://www.w3.org/2000/svg" width="130" height="130">
                        <circle class="loading" fill="none" stroke="#fff" stroke-width="10" stroke-dasharray="377" stroke-dashoffset="377" cx="65" cy="65" r="60" transform="rotate(-90 65 65)" />
                        <circle fill="none" stroke="#fff" stroke-width="3" cx="65" cy="65" r="60" />
                    </svg>
                </div>
                <img src=" http://placehold.it/70x70" alt="..." class="one"></li>
            
        </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img class="d-block w-100" src="http://placehold.it/500x500" alt="First slide">
            </div>
            <div class="carousel-item">
                <img class="d-block w-100" src="http://placehold.it/500x500" alt="Second slide">
            </div>                
        </div>           
    </div>
    </div>
  </div>
</div>

</div>

    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/AttrPlugin.min.js"></script>