点击下载按钮，弹出进度条，下载完成，隐藏进度条

冬天de离别

于 2017-03-15 10:51:38 发布

阅读量7.5k

点赞数 1

分类专栏： html,css 文章标签： html js 悬浮框进度条

本文链接：https://blog.youkuaiyun.com/zhaoxuan0417/article/details/62217130

版权

html,css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一种在网页中实现文件下载进度条的方法，通过HTML和JavaScript结合使用，当用户点击下载按钮时会显示进度条，并在下载完成后自动隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载文件的时候，如果文件比较大，需要有个提示，这个显示一个进度条的gif图片，点击下载按钮，弹出进度条，下载完成，隐藏进度条：

在html头部加上样式：

<style type="text/css">
        .demo{
        position:fixed;
        z-index: 100;
        top: 50%;
        left: 50%;
        } 
 </style>

然后在html的最外层div（也就是body下面一行）加上隐藏div

<div id="process" class="demo" style="display:none;">
	<img src="../../../picture/waitbar.gif" />
</div>
<div id="main-container">
	主要内容
</div>

然后js相应按钮点击事件

$('#export-table-excle').on('click',function(){
    	//打开进度条
    	$("#process").css("display","");
    	$("#main-container").css("opacity","0.3");
    	
    	demo.ajax.postUrl("/summary/getExcel.serv", params,
                function (ret) {
                    if (ret != null && ret.code != null && ret.code.code != null && ret.code.code == '0000') {
                        //请求成功，关闭进度条
                    	$("#process").css("display","none");
                    	$("#main-container").css("opacity","1");
                    	//返回结果
                    	var name = ret.bo;
                    }
                    else {
                        //服务器操作失败
                    }
                    return;
                }
        );
    	
    });