如何在bootstrap carousel 3 item active中激活loader

Question

如何在bootstrap carousel项目索引2处激活任何加载器动画，并在索引2活动加载程序启动时以及索引4活动加载程序停止时在index3处停止。我也希望减少这个装载机的尺寸。

$(document).ready(function() {
    var progressbar = $('#progress_bar');
    max = parseInt(progressbar.attr('max'), 10);
    time = (1000 / max) * 2;
    value = progressbar.val();

    var loading = function() {
        var $ppc = $('.progress-pie-chart');
        if (value >= max) {
            value = 0;
            $ppc.removeClass('gt-50');
        } else {
            value += 1;
        }

        addValue = progressbar.val(value);

        $('.progress-value').html(value + '%');
        var deg = 360 * value / 10;
        if (value > 5) {
            $ppc.addClass('gt-50');
        }

        $('.ppc-progress-fill').css('transform', 'rotate(' + deg + 'deg)');
        $('.ppc-ball').css('transform', 'rotate(' + deg + 'deg)');
        $('.ppc-percents span').html(value + '');
    };

    setInterval(loading, time);
	
	
	
   
});

.bar {
    height: 3px;
    background-color: #52b4ed;
    width: 0%;
    margin: 0px 0px 0px 0px;
    border: none;
    z-index: 11;
    position: relative;
	
}

/* Pie Chart */
.progress-pie-chart {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #024369;
    position: relative;
}

.progress-pie-chart.gt-50 {
background:red;



}

.ppc-progress {
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width: 200px;
    height: 200px;
    clip: rect(0, 200px, 200px, 100px);
}

.gt-50 .ppc-progress {
    clip: rect(0, 100px, 200px, 0);
}

.ppc-progress-fill {
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
    width: 200px;
    height: 200px;
    clip: rect(0, 100px, 200px, 0);
  

background:red;






}

.ppc-ball {
    position: absolute;
    width: 200px;
    height: 200px;
}

.ppc-ball:after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
   
background: rgba(82,180,237,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(82,180,237,1) 0%, rgba(7,120,219,0) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(82,180,237,1)), color-stop(100%, rgba(7,120,219,0)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(82,180,237,1) 0%, rgba(7,120,219,0) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(82,180,237,1) 0%, rgba(7,120,219,0) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(82,180,237,1) 0%, rgba(7,120,219,0) 100%);
background: radial-gradient(ellipse at center, rgba(82,180,237,1) 0%, rgba(7,120,219,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52b4ed', endColorstr='#0778db', GradientType=1 );

    top: -7px;
    left: 85px;
}

.gt-50 .ppc-progress-fill {
    clip: rect(0, 200px, 200px, 100px);
    background: #024369;
}

.ppc-percents {
    position: absolute;
    border-radius: 50%;
    left: calc(50% - 173.91304px / 2);
    top: calc(50% - 173.91304px / 2);
    width: 173.91304px;
    height: 173.91304px;
    background: #052b4e;
    text-align: center;
    display: table;
}

.ppc-percents span {
    display: block;
    font-size: 2.6em;
    font-weight: bold;
    color: #fc7114;
	text-shadow: 0px 0px 15px rgba(248, 94, 41, 1);
}

.pcc-percents-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.progress-pie-chart {
    margin: 50px auto 0;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel">

				    	        <ol class="carousel-indicators">
						            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
						            <li data-target="#myCarousel" data-slide-to="1"></li>
						            <li data-target="#myCarousel" data-slide-to="2"></li>
						        </ol> 
				        <!-- Carousel items -->
				        <div class="carousel-inner">
				            <div class="active item">
                        <div class="container">
				         		<div class="carousel-caption">
				                  <h3>First slide label</h3>
				                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				                </div>
                        </div>
				            </div>
				            <div class="item">
                        <div class="container">
				                <div class="carousel-caption">
				                  <h3>Second slide label</h3>
				                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				                </div>
                        </div>
				            </div>
				            <div class="item">
                        <div class="container">
				                <div class="carousel-caption">
				                  <h3>Third slide label</h3>
				                  <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
				                </div>
                        </div>
				            </div>
				        </div>
				    </div>
				        <hr class="transition-timer-carousel-progress-bar" />

<div style="margin:0 auto;">
	
	<div class="bar_container">
    <div id="main_container">
        <div id="pbar" class="progress-pie-chart" data-percent="0">
            <div class="ppc-progress">
                <div class="ppc-progress-fill"></div>
            </div>
            <div class="ppc-percents">
                <div class="pcc-percents-wrapper">
                    <span>0</span>
                </div>
            </div>
            <div class="ppc-ball"></div>
        </div>
        <progress style="display: none" id="progress_bar" value="0" max="10"></progress>
    </div>
</div>
	</div>