zoukankan      html  css  js  c++  java
  • NProgress.js template

    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这个博客 说的很清楚 你们可以去看看吧

  • 相关阅读:
    P1659 [国家集训队]拉拉队排练
    manacher小结
    P4555 [国家集训队]最长双回文串
    P3649 [APIO2014]回文串
    P3899 [湖南集训]谈笑风生
    插头dp练习
    luoguP3066 [USACO12DEC]逃跑的BarnRunning
    luoguP3769 [CH弱省胡策R2]TATT
    android 广播,manifest.xml注册,代码编写
    *.db-journal 是什么(android sqlite )数据库删除缓存
  • 原文地址:https://www.cnblogs.com/lwwen/p/6097219.html
Copyright © 2011-2022 走看看