microbee-http 丨 软件开发框架
microbee-http 丨 软件开发框架 > 快速开始 > MICROBEE-FRONT > 框架工具组件 > 进度条

进度条

参数说明：

参数说明类型可选值
ele_id挂载元素的idString必填
bgcolor进度条背景色String默认值#f57e00
istext是否显示文字百分比:true显示，false不显示boolean默认值false
fontsize设置文字大小String默认值14px
fontcolor设置文字颜色String默认值#333
position设置文字显示位置：可选centertop,bottom,left,rightString默认值center
percent设置百分比Int默认值100
size设置进度条的高度String默认值20px

动态修改百分比方法：

参数说明类型可选值
ele_id挂载元素的idString必填
percent设置百分比Int——

                // percent动态修改的百分比
                McrbHttpClient.progress.change({
                    ele_id:'progress_bar',
                    percent: percent,
                },function(e){
                    // console.log('当前进度是'+e);
                });

用法实例：

 

<div id="progress_bar"></div>
// 进度条
McrbHttpClient.progress.init({
    ele_id:'progress_bar',
    bgcolor:'#f57e00',
    istext:true,
    fontsize:'12px',
    fontcolor:'#0069ff',
    position:'right',
    percent: 0,
    size:'20px',
});
var percent = 0;
var timer = setInterval(function(){
    // 这里采用随机的两位数来模拟
    var a = Math.floor(Math.round(Math.random()*(100-10)+10)/10);
    percent = percent+a;
    // console.log(percent)
    if(percent>100){
        percent = 100;
        clearInterval(timer);
    }
    McrbHttpClient.progress.change({
        ele_id:'progress_bar',
        percent: percent,
    },function(e){
        // console.log('当前进度是'+e);
    });
},1000);

效果展示:

 
本文档来自—microbee-http 丨 软件开发框架平台