jquery书写的等待进度条_jq进度条手写-CSDN博客

本文链接：https://blog.csdn.net/qadada/article/details/17019499

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery简单进度</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
            #load {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                background-color: #004400;
                opacity: 0.5;
                z-index: 300;
                display: none;
            } 
			#loadgif {
				position:fixed;
				top:50%;
				left:40%;
				width:300px;
				z-index:300;
				display:none;
            }
			span{
				color:#000000;
				font-size:18px;
				font-family:'microsoft YaHei';
				text-align:center;
				font-weight:bold;
			}
        </style>
        <script type="text/javascript" src="js/jquery-2.0.3.js">
        </script>
    </head>
    <body>
        <div style="width:100%;height:100px;background-color: #2B426B;">
            <button id="sendnowbut"> 立即发送</button>
        </div>
        <div id="load"></div>
		<div id="loadgif">
			<div><span>邮件发送中，请稍后<span id="11">.</span></span></div>
		</div>
        <script type="text/javascript">
            //点击立即发送开始遮罩
            $("#sendnowbut").click(function(){
                $("#load").css("display", "block");
				$("#loadgif").css("display", "block");
				setInterval("write()",1000);
				;
            });
            //关闭遮罩(根据后台返回值，关闭遮罩)
            $("#close_btn").click(function(){
                $("#load").css("display", "none");
				$("#loadgif").css("display", "none");
            })
			//写入省落号
			function write(){
				var length = $("#11").text().length+1;
				
				if(1==length){
					$("#11").html(".");
				}
				if(2==length){
					$("#11").html("..");
				}
				if(3==length){
					$("#11").html("...");
				}
				if(4==length){
					$("#11").html("....");
				}
				if(5==length){
					$("#11").html(".....");
				}
				if(6==length){
					$("#11").html("......");
				}
				if(7==length){
					$("#11").html(".");
				}
			}
        </script>
    </body>
</html>