使用jQuery自定义进度条实现页面加载效果-CSDN博客

本文链接：https://blog.csdn.net/iteye_5753/article/details/82433867

基于jquery自己写了个进度条，可以进行简单配置。代码如下：

window.ui=window.ui||{};   
window.ui.progressbar=window.ui.progressbar||{};   

window.ui.progressbar={   
    progressArea:null,// 页面中的div id
    isInited:false, // 初始化标记
    bgImageUrl:null,// 背景图片
    // 进度条初始化
    initProgressBar:function (progressArea){   
        this.progressArea=progressArea;  
        // 顶层div样式
        var ui_progressbar_container_css={   
            "color": "#784848",   
            "width": "30%",   
            "height": "32px",   
            "line-height": "32px",   
            "background-color":"#bdb76b",  
            "position": "absolute",   
            "left":"35%",   
            "top":"50%",  
            "z-index":"1004"  
        };   
        // 滚动div样式 
        var ui_progressbar_scroll_css={   
            "width": "0px",   
            "height": "32px",   
            "background": "#87ceeb",   
            "position": "absolute",
            "background-image":"url("+this.bgImageUrl+")",
        };   
        // 文字显示样式 
        var ui_progressbar_display_text_css={   
            "width": "100%",   
            "height": "32px",   
            "line-height": "32px",   
            "text-align": "center",   
            "position": "absolute"  
        };   
        // 构造进度条的div
        $("<div  id='ui_progressbar_container'/>").css(ui_progressbar_container_css).appendTo($("#"+this.progressArea));   
        $("<div id='ui_progressbar_scroll'/>").css(ui_progressbar_scroll_css).appendTo($("#ui_progressbar_container"));   
        $("<div id='ui_progressbar_display_text'/>").css(ui_progressbar_display_text_css).appendTo($("#ui_progressbar_container"));   

    },   

    loadingInterval:null,// 运行定时器

    // 进度条运行方法
    loading:function() {   
        var currentPoint = 0;   
        var percentage = null;     
        var that=this;  
        var hasSlowDwon=false;  
        var fun = function() {       
            if (currentPoint > 98) {   
                clearInterval(that.loadingInterval);   
                return;   
            }            
            if (currentPoint > 80) {   
                currentPoint += 1;   
                percentage = currentPoint;   

                if(!hasSlowDwon){  
                    clearInterval(that.loadingInterval);   
                    that.loadingInterval = setInterval(fun, 1000);   
                    hasSlowDwon=true;  
                }  
            } else {   
                currentPoint += 1;   
                percentage = currentPoint;   
            }   
            that.changeProgressValue(percentage);  
        };   
        this.loadingInterval = setInterval(fun, 50);           
    },   
    // 进度条值改变方法
    changeProgressValue:function(percentage){  
        $('#ui_progressbar_scroll').animate( { width : percentage + '%' }, 0, function() {   
            $('#ui_progressbar_display_text').text("Progress..." + percentage + "%");   
        });   
    },  

    // 进度条开始方法
    startProgress:function(progressArea){     
        if(!this.isInited){  
            this.initProgressBar(progressArea);   
            this.isInited=true;  
        }  
        this.changeProgressValue(0);       
        this.loading();   
        $("#"+this.progressArea).show();  
    },  
    // 进度条完成方法
    completeProgress:function(){  
            clearInterval(this.loadingInterval);             
            this.changeProgressValue(100);  
            $("#"+this.progressArea).hide();  
    }  
};

测试代码:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<title>jQuery模拟页面加载进度条</title>
</head> 
<body>
<div id="progressArea"></div>

<script type="text/javascript" src="../jslib/jquery-1.8.1.min.js"></script> 
<script type="text/javascript" src="jslib/customer.ui.simple.progressbar.js"></script> 
<script> 
	window.ui.progressbar.bgImageUrl="logo000746.gif";// 设置背景图片 
	window.ui.progressbar.startProgress("progressArea");
      setTimeout("window.ui.progressbar.completeProgress()",2000);// 结束进度条
</script> 
</body> 
</html>

js进度条简单模拟