您的位置：首页 > Web前端 > HTML5
点击a标签页面加载效果-百度nprogress

2015-10-21 00:00 471 查看
摘要: 支持H5效果，在手机端展示页面加载的进度，代码直接全文拷贝，修改下引入的jQuery路径即可
<!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
+ 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是个插件，直接使用即可

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： H5 响应试显示页面加载进度
相关文章推荐
新的分享
章节导航