利用jQuery实现ajax下载文件时进度条

最新推荐文章于 2024-04-11 14:48:42 发布

未曾遇你

最新推荐文章于 2024-04-11 14:48:42 发布

阅读量1.4k

点赞数

分类专栏：页面交互文章标签： jquery ajax javascript

本文链接：https://blog.csdn.net/qq_44749901/article/details/126597902

版权

页面交互专栏收录该内容

5 篇文章 0 订阅

订阅专栏

实现原理：模拟一个虚拟的进度，利用里面子元素的宽度变化来实现进度增长，
关键属性：transition

预览：

进度条

html

 <div class="lineProgress">
    <span></span>
 </div>

css

 /* 进度线 */
    .lineProgress {
        width: 402px;
        height: 7px;
        background: #D9D9D9;
        position: relative;
        margin: 40px 0 64px;
    }

    .lineProgress span {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 7px;
        background: #4B95F8;
        transition: width 10s ease-out;
    }

JS：当接口成功时，进度条跳到100%

 $.ajax({
                url: 'http://127.0.0.1:6780/enroll/enroll_title',
                type: "POST",
                timeout: 10000,
                beforeSend: function () {
                    setTimeout(function () {
                        $(".mygenerate1").show().find(".lineProgress span").css("width", "80%");
                    }, 0)
                },
                success: function () {
                    // 进度到100%
                    $(".lineProgress span").css({ "width": "100%", "transition": "none" });
                    setTimeout(function () {
                        $(".maskbg").show();
                        $(".mygenerate1").hide();
                    }, 400)
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    if (textStatus == "timeout") {
                        $(".mygenerate1").hide();
                        $(".mygenerate2").show()
                        $(".lineProgress span").css({ "width": "0", "transition": "width 10s ease-out" })
                    }
                }
            });