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

原创
2015/10/21 18:43
阅读数 1.2K
<!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是个插件,直接使用即可

展开阅读全文
打赏
0
5 收藏
分享
加载中
更多评论
打赏
0 评论
5 收藏
0
分享
返回顶部
顶部