jQuery NProgress.js加载进度插件的简单使用方法

矫情吗；* 2021-07-26 19:39 388阅读 0赞

> NProgress是基于jquery的，且版本要 >1.8 。这篇文章主要介绍了NProgress.js加载进度插件的简单使用方法,需要的朋友可以参考下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70][]

**NProgress.js**

说明: NProgress是基于jquery的，且版本要 >1.8

下载地址: [https://github.com/rstacruz/nprogress][https_github.com_rstacruz_nprogress]

API:

NProgress.start() — 启动进度条
    NProgress.set(0.4) — 将进度设置到具体的百分比位置
    NProgress.inc() — 少量增加进度
    NProgress.done() — 将进度条标为完成状态

**　使用步骤:**

1. 引入

2. 使用场景一:页面加载的效果  开始页面加载开始进度条  页面加载好  结束进度条:

<em id="__mceDel"><script>
    $(function() {
     　NProgress.start();
     　　$(window).load(function() {
       　　NProgress.done();
       });
    </script>
    </em>

3.使用场景二:ajax发送的效果  开始发送开始进度条  成功后  结束进度条:

**总结**

以上所述是小编给大家介绍的jQuery NProgress.js加载进度插件的简单使用方法，希望对大家有所帮助

**jquery调用真实上传进度**

$("#addVideoModal .btn-primary").click(function () {
            var video = document.getElementById('videoFile').files[0]; //获取文件
            var videoName = document.getElementById('videoName').value; //获取文件名称
    
            if (videoName == null||videoName == ""){
                $("#addVideoModal").modal('hide');
                hasError("视频文件名称不能为空!");
                return false;
            }
    
            if (video == undefined||video == ""){
                $("#addVideoModal").modal('hide');
                hasError("请选择要上传的视频文件!");
                return false;
            }
            var file = video.name;
            if (file.lastIndexOf('.')==-1){    //如果不存在"."
                $("#addVideoModal").modal('hide');
                hasError("路径不正确!");
                return false;
            }
            var AllImgExt=".mp4|.mov|";
            var extName = file.substring(file.lastIndexOf(".")+1).toLowerCase();//（把路径中的所有字母全部转换为小写）
            if(AllImgExt.indexOf(extName+"|")==-1)
            {
                $("#addVideoModal").modal('hide');
                ErrMsg="该文件类型不允许上传。请上传 "+AllImgExt+" 类型的文件，当前文件类型为"+extName;
                hasError(ErrMsg);
                return false;
            }
            var videoType = extName; //获取文件类型
            var formData = new FormData();
            formData.append('video',video);
            formData.append('videoName',videoName);
            formData.append('type',videoType);
    		$(".btn-video-primary") .attr('disabled',true);
    		$(".btn-video-primary") .html('<i class="fa fa-plus-circle"></i>上传中...');
            $("#addVideoModal").modal('hide');
            NProgress.set(0);
            $.ajax({
                type: 'post',
                data: formData,
                //取消帮我们格式化数据，是什么就是什么
                cache: false,
                contentType: false,
                processData: false,
                url: "whdp/config/insertOverviewVideo.do",
                xhr: function() {  //ajax进度条，直接拿过去就可以用
                    var xhr = $.ajaxSettings.xhr();
                    if (xhr.upload) {
                        xhr.upload.addEventListener("progress", function (e) {
                            var loaded = e.loaded; //已经上传大小情况
                            var tot = e.total; //附件总大小
                            var per = loaded / tot; //已经上传的百分比
                            NProgress.set(per);
                        }, false);
                        return xhr;
                    }
                },
                success: function (result) {
                    //console.log(result);
                    if (result=="success") {
                        $(".btn-video-primary") .attr('disabled',false);
                        $(".btn-video-primary") .html('<i class="fa fa-plus-circle"></i> 添加视频文件');
                        NProgress.done();
                        getSuccess("修改成功！");
                        getOverviewVideo();
                    }
                },
                error: function(errorMsg) {
    
                }
            })
        });

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWluZzEwMTY_size_16_color_FFFFFF_t_70]: /images/20210726/157548697ec14e2d990ed8bfc1897ee0.png
[https_github.com_rstacruz_nprogress]: https://github.com/rstacruz/nprogress