NProgress使用记录

最新推荐文章于 2024-08-08 08:03:26 发布

罗荣盛

最新推荐文章于 2024-08-08 08:03:26 发布

阅读量910

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/luorongsheng/article/details/52397542

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

把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

收藏

觉得还不错? 一键收藏
0
评论
NProgress使用记录

把NProgress.css和NProgress.js加进我们的页面进度条测试NProgress.configure({ showSpinner:false'', partent:'body' //进度条绑定到body上});$("button").on('click',function(){
复制链接

扫一扫

专栏目录