文档章节

点击a标签页面加载效果-百度nprogress

白狼栈
 白狼栈
发布于 2015/10/21 18:43
字数 921
阅读 390
收藏 5
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*data loading*/
#nprogress { pointer-activities: none }
#nprogress .bar { background: #a0ce4e; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 2px }
#nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%; box-shadow: 0 0 10px #a0ce4e, 0 0 5px #a0ce4e; opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px) }
#nprogress .spinner { display: block; position: fixed; z-index: 100; top: 15px; right: 15px }
#nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 4px transparent; border-top-color: #5b9df7; border-left-color: #5b9df7; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite }
.nprogress-custom-parent { overflow: hidden; position: relative }
.nprogress-custom-parent #nprogress .spinner, .nprogress-custom-parent #nprogress .bar { position: absolute }
@-webkit-keyframes nprogress-spinner { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg) } }
@keyframes nprogress-spinner { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } }
#nprogress { position: fixed; top: 0; left: 0; display: table; height: 100%; width: 100%; z-index: 9999; cursor: wait; pointer-activities: auto }
#nprogress .spinner { right: 0; width: 100%; height: 100%; top: 50% }
#nprogress .spinner-icon { width: 3em; height: 3em; margin: 0 auto; top: -50% }
</style>

<script type="text/javascript" src="/js/jquery-2.1.0.min.js"></script>
</head>
<body>

<a href="">点击H5加载</a>

<script type="text/javascript">
(function (t, e) {
    t.NProgress = e();
})(this, function () {
    function t(t, e, i) {
        return e > t ? e : t > i ? i : t
    }
    function e(t) {
        return 100 * (-1 + t)
    }
    function i(t, i, n) {
        var r;
        return r = "translate3d" === d.positionUsing ? {
            transform: "translate3d(" + e(t) + "%,0,0)"
        } : "translate" === d.positionUsing ? {
            transform: "translate(" + e(t) + "%,0)"
        } : {
            "margin-left": e(t) + "%"
        }, r.transition = "all " + i + "ms " + n, r
    }
    function n(t, e) {
        var i = "string" == typeof t ? t : a(t);
        return i.indexOf(" " + e + " ") >= 0
    }
    function r(t, e) {
        var i = a(t),
            r = i + e;
        n(i, e) || (t.className = r.substring(1))
    }
    function o(t, e) {
        var i, r = a(t);
        n(t, e) && (i = r.replace(" " + e + " ", " "), t.className = i.substring(1, i.length - 1))
    }
    function a(t) {
        return (" " + (t.className || "") + " ").replace(/\s+/gi, " ")
    }
    function s(t) {
        t && t.parentNode && t.parentNode.removeChild(t)
    }
    var l = {};
    l.version = "0.1.6";
    var d = l.settings = {
        minimum: .08,
        easing: "ease",
        positionUsing: "",
        speed: 200,
        trickle: !0,
        trickleRate: .02,
        trickleSpeed: 800,
        showSpinner: !0,
        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>'
    };
    l.configure = function(t) {
        var e, i;
        for (e in t) i = t[e], void 0 !== i && t.hasOwnProperty(e) && (d[e] = i);
        return this
    }, l.status = null, l.set = function(e) {
        var n = l.isStarted();
        e = t(e, d.minimum, 1), l.status = 1 === e ? null : e;
        var r = l.render(!n),
            o = r.querySelector(d.barSelector),
            a = d.speed,
            s = d.easing;
        return r.offsetWidth, h(function(t) {
            "" === d.positionUsing && (d.positionUsing = l.getPositioningCSS()), p(o, i(e, a, s)), 1 === e ? (p(r, {
            transition: "none",
            opacity: 1
          }), r.offsetWidth, setTimeout(function() {
              p(r, {
                  transition: "all " + a + "ms linear",
                  opacity: 0
              }), setTimeout(function() {
                  l.remove(), t()
              }, a)
          }, a)) : setTimeout(t, a)
        }), this
    }, l.isStarted = function() {
        return "number" == typeof l.status
    }, l.start = function() {
        l.status || l.set(0);
        var t = function() {
            setTimeout(function() {
              l.status && (l.trickle(), t())
            }, d.trickleSpeed)
        };
        return d.trickle && t(), this
    }, l.done = function(t) {
        return t || l.status ? l.inc(.3 + .5 * Math.random()).set(1) : this
    }, l.inc = function(e) {
        var i = l.status;
            return i ? ("number" != typeof e && (e = (1 - i) * t(Math.random() * i, .1, .95)), i = t(i + e, 0, .994), l.set(i)) : l.start()
    }, l.trickle = function() {
        return l.inc(Math.random() * d.trickleRate)
    }, function() {
        var t = 0,
            e = 0;
        l.promise = function(i) {
            return i && "resolved" != i.state() ? (0 == e && l.start(), t++, e++, i.always(function() {
                e--, 0 == e ? (t = 0, l.done()) : l.set((t - e) / t)
            }), this) : this
        }
    }(), l.render = function(t) {
        if (l.isRendered()) return document.getElementById("nprogress");
        r(document.documentElement, "nprogress-busy");
        var i = document.createElement("div");
        i.id = "nprogress", i.innerHTML = d.template;
        var n, o = i.querySelector(d.barSelector),
            a = t ? "-100" : e(l.status || 0),
            h = document.querySelector(d.parent);
            return p(o, {
                transition: "all 0 linear",
                transform: "translate3d(" + a + "%,0,0)"
            }), d.showSpinner || (n = i.querySelector(d.spinnerSelector), n && s(n)), h != document.body && r(h, "nprogress-custom-parent"), h.appendChild(i), i
    }, l.remove = function() {
        o(document.documentElement, "nprogress-busy"), o(document.querySelector(d.parent), "nprogress-custom-parent");
        var t = document.getElementById("nprogress");
        t && s(t)
    }, l.isRendered = function() {
        return !!document.getElementById("nprogress")
    }, l.getPositioningCSS = function() {
        var t = document.body.style,
            e = "WebkitTransform" in t ? "Webkit" : "MozTransform" in t ? "Moz" : "msTransform" in t ? "ms" : "OTransform" in t ? "O" : "";
        return e + "Perspective" in t ? "translate3d" : e + "Transform" in t ? "translate" : "margin"
    };
    var h = function() {
        function t() {
            var i = e.shift();
            i && i(t)
        }
        var e = [];
        return function(i) {
            e.push(i), 1 == e.length && t()
        }
    }(),
    p = function() {
        function t(t) {
            return t.replace(/^-ms-/, "ms-").replace(/-([\da-z])/gi, function(t, e) {
              return e.toUpperCase()
            })
        }
        function e(t) {
            var e = document.body.style;
            if (t in e) return t;
            for (var i, n = r.length, o = t.charAt(0).toUpperCase() + t.slice(1); n--;) if (i = r[n] + o, i in e) return i;
            return t
        }
        function i(i) {
            return i = t(i), o[i] || (o[i] = e(i))
        }
        function n(t, e, n) {
            e = i(e), t.style[e] = n
        }
        var r = ["Webkit", "O", "Moz", "ms"],
            o = {};
            return function(t, e) {
                var i, r, o = arguments;
                if (2 == o.length) for (i in e) r = e[i], void 0 !== r && e.hasOwnProperty(i) && n(t, i, r);
                else n(t, o[1], o[2])
            }
    }();
    return l;
});

(function (t) {
  t.click(function () {
    NProgress.start();
  });
})($('a'));

</script>
</body>
</html>

注意注意:后面才发现,nprogress是个插件,直接使用即可

© 著作权归作者所有

共有 人打赏支持
白狼栈
粉丝 19
博文 81
码字总数 30876
作品 0
杭州
私信 提问
NProgress,前端必备进度条插件,你值得拥有

官方网站:http://ricostacruz.com/nprogress/ 下载地址:https://github.com/rstacruz/nprogress 安装 依赖于 jQuery (1.8版本及以上),添加 nprogress.js 和 nprogress.css 到你的项目中。...

飞翔的熊blabla
01/18
0
0
开源 Java 博客平台 - NewStarBlog

NewStarBlog is an open source Java blog platform. NewStarBlog 是开源 Java 博客平台。 Technologies 涉及技术 NewStarBlog covers Spring Framework 5, Spring Boot 2, Thymeleaf, Elast......

waylau
2018/04/26
0
0
vue-element-admin v2.2.1 发布,后台集成方案

vue-element-admin v2.2.1 已发布,更新内容: 新增 env_config 变量来优化打包 a842a4b 优化导出 excel 样式 a8602e7 修复 browserslist 书写错误 bug 516897b 修复 NProgress 在某些情况下...

王练
2017/10/26
4.2K
3
NewStarBlog 发布 1.0 版本,国产开源 Java 博客平台

NewStarBlog 是开源 Java 博客平台。 涉及技术 NewStarBlog 使用了 Spring Framework 5, Spring Boot 2, Thymeleaf, Elasticsearch, Spring Data 等技术。 JDK 8 Gradle 4.5.1 Spring Boot 2......

waylau
2018/04/26
1K
3
waylau/new-star-blog

NewStarBlog NewStarBlog is an open source Java blog platform. NewStarBlog 是开源 Java 博客平台。 Technologies 涉及技术 NewStarBlog covers Spring Framework 5, Spring Boot 2, Thym......

waylau
2018/04/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

什么时候使用字节流、什么时候使用字符流,二者的区别

在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成。 InputStream 和OutputStream,...

watermelon11
57分钟前
4
0
Alpakka Kafka,反应式Kafka客户端

Alpakka Kafka 是一个要用于 Java 和 Scala 语言的开源的流感知和反应式集成数据线项目。它建立在 Akka Stream之上,提供了 DSL 来支持反应式和流式编程,内置回压功能。Akka Streams 是 Re...

羊八井
今天
4
0
PHP7源码编译安装详解

$ yum groupinstall "development tools"$ yum install -y gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype \freetype-devel libpng libpng-devel libxml2 ......

问题终结者
今天
5
0
Django学习笔记-从创建虚拟环境到启用服务

1 前置条件 windows系统下,目前已经完成anaconda3或miniconda3的安装,这也意味着已经完成了python3的安装。 2 创建虚拟环境 1、通过Anaconda Prompt,使用conda命令创建虚拟环境(base) e...

davidwbnu
昨天
4
0
python学习04:函数的定义及基本使用

python可以像c++一样,可以直接定义函数。具体格式如下: def(关键字) 函数名(形参01,形参02...): do_something... #如果有返回值,则调用以下语句 return 返回值...

太空堡垒
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部