NProgress使用记录

来源：互联网发布：sqlserver 存储过程编辑：程序博客网时间：2024/06/04 19:27

把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>

0 0