/*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% }
     
      
       点击H5加载
       
        (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: '
        
         
          
           
            '    };    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'));
           
          
         
        
       
      
     
    

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