angular与TimelineMax实现进度条的动态加载（js）

这里进度条的样式采用bootstrap提供的进度条，定义进度条所需的数据，如：
$scope.simulationProgressData = { width: 1, show: false, dayList: ‘’, left:50, };

因进度条中含有多个不同的数据，因此将所需要显示的数据存入dayList，使用ng-repeat将dayList中所有的数据进行显示

 <div ng-init="simulationProgressData" ng-show="simulationProgressData.show" style="position:absolute;bottom:2px;width:100%;opacity:0.7; height: 60px;">

            <div class="progress" id="simulationProgressBar" style="width:100%;margin:auto;bottom:20px;position:absolute;border-radius:20px">
                <div class="progress-bar progress-bar-info progress-bar-striped" id="progressbar" role="progressbar" aria-valuenow="60"
                     aria-valuemin="0" aria-valuemax="100" ng-style="{width:simulationProgressData.width+'%'}" ng-bind="simulationProgressData.width+'%'">
                </div>
            </div>
            <div ng-repeat="x in simulationProgressData.dayList" ng-bind="x.day" ng-style="{left:x.left+'%',bottom:x.bottom+'%'}" style="position :absolute;bottom:0px;font-size:10px;color:white"></div>
        </div>

定义动画progressBarAni 与进度条的初始值为progressbarnum ，通过speed时间，将其运动至progressbarnum1。如progressbarnum =0，progressbarnum1=100，speed=10，则为进度条从0到100耗时10s。若多个时间段的进度同时使用了该进度条，则进行多个调用，并根据时间的先后设置改动画的delay。在动画的onUpdate方法中，使用$apply不断刷新进度条的width，从而实现进度条的动态加载

var progressBarAni = new TimelineMax();
var beginValue= { value: progressbarnum };
                    progressBarAni.to(beginValue, speed, {
                        value: progressbarnum1, ease: Linear.easeNone, delay: n* speed, onUpdate: function () {
                            spoce.$apply(spoce.simulationProgressData.width = parseInt(beginValue.value));
                            
                        }, onComplete: function () {
                            progressbarnum = tmpProper.value
                            if (progressbarnum == 100) {
                                for (var i = 0; i < Model.modelDiv.progressAni.length; i++) {
                                    Model.modelDiv.progressAni[i].clear();
                                }
                            }
                            
                            
                        }
                    });

可定义一个数组，将每次的动画存入数组，方便后续使用，若需要暂停进度，则遍历数组中所有的动画对象并调用pause()；若继续，则调用resume()，若停止则clear()。