页面初始化时显示进度条

最新推荐文章于 2021-05-26 09:44:31 发布

与你分享

最新推荐文章于 2021-05-26 09:44:31 发布

阅读量421

点赞数

分类专栏： IT

本文链接：https://blog.csdn.net/wass7799/article/details/41542133

版权

IT 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

var etControl = {};
etControl.process = function (config) {
/*需要放在html中的body标签后面使用本控件*/

    var count = 0;
    var id = "loading";
    var el = "#" + id;

$("body").append('<div id="' + id + '"></div>');

    var divTxt = "#" + id + " #div1";
    $(el).html("<div style='width:99%;height:45%;'></div><div style='width:200px;height:16px;border:1px #CCC solid;margin:auto;'><div id=\"div1\"></div></div>");
    $(el).attr("style", "width: 100%;height: 100%;background: #FFF;padding: 5px;position: fixed;left: 0;top: 0;font-size:12px;z-index:999;");
    $(divTxt).attr("style", "width: 1px;height: 16px;background: #F1FF4D;");

    /*更新进度条*/
    this.updateProcess = function (percent) {

        setTimeout(function () { $(divTxt).animate({ width: percent * 2 + "px" },200).text(percent + "%") }, ++count * 200);
        if (percent == 100) {           /*100%就从页面移除loading标签*/
            setTimeout(function () {
                $(el).hide(500);
                setTimeout(function () { $(el).remove() }, 500);
            }, count * 300 + 200);
        }
    };
}