cocos creator 实现实时加载进度条

节点图

加载进度条的节点

loading 与 bar 节点为 建立的 progreebar 组件 barnumber 为加载进度的百分比显示 为label组件节点

loading节点的属性栏

注意：total length 的数字 为 bar 节点背景图片的 宽度

代码部分：

loadres:function(){

var self = this;

var loadbar =  this.loadbar;

var loadtext = this.loadtext;

var login_button = this.login_button;

var jindu = 0;

self.is_loading = true;

cc.loader.onProgress = function ( completedCount, totalCount,  item ){

if(totalCount !== 0 && self.is_loading === true){

jindu = completedCount/totalCount;

}

loadbar.progress = jindu;

var number_jindu = parseInt(jindu*100);

loadtext.string = number_jindu+'%';

};

cc.loader.loadResAll("ziyuan", function (err, assets) {

self.onLoadComplete();

});

},

onLoadComplete:function(){

this.is_loading = false;

this.login_button.node.active=true;

this.loadbar.node.active=false;

this.loadtext.node.active=false;

cc.loader.onComplete = null;

//cc.vv.AudioAction.PlayBGM('bg_one.mp3');

},