当前位置: 首页 > 工具软件 > PEG.js > 使用案例 >

NProgress.js template

习洲
2023-12-01

NProgress.js:加载进度条:http://ricostacruz.com/nprogress/

基础的这几个方法

这个网站上都有

我在一个地方看到这个代码

    NProgress.configure({
        template: '<div class="bar" role="bar" style="background: white"><div class="peg" style="box-shadow: 0 0 10px #fff, 0 0 5px #fff;"></div></div><div class="spinner" role="spinner"><div class="spinner-icon" style="border-top-color:white;border-left-color: white"></div></div>'
    });

怎么说呢

在网站上看不到吗

然后就自己在页面上捉摸

你用了这个插件

然后你定义加载条跟加载滚动的控制条呢

你就可以加这两句代码

在页面上的显示就是

<div id="nprogress"><div class="bar" role="bar" style="background: red; transform: translate3d(-0.6%, 0px, 0px); transition: all 200ms ease;"><div class="peg" style="box-shadow: 0 0 10px #fff, 0 0 5px #fff;"></div></div><div class="spinner" role="spinner"><div class="spinner-icon" style="border-top-color:white;border-left-color: white"></div></div></div>

看到吗

就演变成了这样的

configure顾名思义就是配置的意思啦

template就是模板的意思了

就是把这个模板放进nprogress里面咯

<script type="text/javascript">
        $(function(){
            NProgress.configure({
                template: $('#myId').html() // template是用来设置动画样式的属性
            });
            NProgress.start();
        });
        $(window).load(function(){
            NProgress.done();
        })
    </script>

这个myid你可以在页面上了,也可以在js里面定义一下啦

然后你就可以这样引入这个模板了

是的

 

 role=bar :横向加载条 

          role=spinner 旋转的小圈  

这篇博客也是推荐了http://www.cnblogs.com/xuange306/p/5122451.html这个博客 说的很清楚 你们可以去看看吧

 


更多专业前端知识,请上 【猿2048】www.mk2048.com
 类似资料:

相关阅读

相关文章

相关问答