NProgress使用记录

最新推荐文章于 2025-05-21 14:55:16 发布

原创最新推荐文章于 2025-05-21 14:55:16 发布 · 971 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在网页中引入并配置NProgress进度条插件，包括必要的CSS和JS文件的链接方式，以及通过JavaScript设置进度条外观和行为的具体方法。

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

把NProgress.css和NProgress.js加进我们的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <!-- 微信加载时进度条-->
    <link rel="stylesheet" href="css/nprogress.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/nprogress.js"></script>
</head>
<body>
<button>测试</button>
<script>

NProgress.configure({

     showSpinner:false'',

     partent:'body'   //进度条绑定到body上

});
$("button").on('click',function(){
    NProgress.start();
    $(document).ready(function(){
        NProgress.done();
    })
});
</script>
</body>
</html>

css 里面自己改变进度条的样式

初始化参数：

<pre name="code" class="javascript">var Settings = NProgress.settings = {
    minimum: 0.08,
    easing: 'linear',
    positionUsing: '',
    speed: 350,
    trickle: true,
    trickleSpeed: 250,
    showSpinner: true,  /* 是否显示旋转的小圆*/
    barSelector: '[role="bar"]',  /* 直线进度条*/
    spinnerSelector: '[role="spinner"]',    /*  圆形的转的圈*/
    parent: 'body',
    template: '<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'
  };

其他可以参考学习博客：：http://c7sky.com/nprogress.html

<span style="font-family: Arial, Helvetica, sans-serif;">http://www.cnblogs.com/xuange306/p/5122451.html    介绍nprogress和pace.js进度条插件  </span>

<span style="font-family: Arial, Helvetica, sans-serif;">nprogress官网：</span><span style="font-family: Arial, Helvetica, sans-serif;">http://ricostacruz.com/nprogress/</span>

<span style="font-family: Arial, Helvetica, sans-serif;">githup项目：</span><span style="font-family: Arial, Helvetica, sans-serif;">https://github.com/rstacruz/nprogress/</span>