jQueryを使用してajaxファイルをダウンロードするときにプログレスバーを実現します

実装原理: 仮想進行状況をシミュレートし、内部の子要素の幅の変更を使用して進行状況の成長を実現します
キー属性: トランジション

プレビュー:

プログレスバー

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" })
                    }
                }
            });