我想使用jQuery进度条并仅在页面加载时将其添加到页面顶部(并使其在之后消失),这种行为在某种程度上与GitHub中的进度条相似:
我怎样才能做到这一点?
我目前有以下HTML代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<div id="content">
<div id="progressbar"></div>
<div id="my-content">
My page content goes here....
</div>
</div>
</body>
使用Javascript:
$('#progressbar').progressbar({
value: false
});
我建议你使用NProgress。它不是使用jQuery-UI,但它非常纤薄且易于集成。我已经在几个项目中使用它,它运行良好。
使用NProgress,您不必拥有HTML代码,只需运行以下行:
NProgress.configure()
如果您需要一些特殊配置NProgress.start()
开始进度条NProgress.inc()
增加进度NProgress.done(true)
一旦完成进展而已!很容易!
我建议使用PACE(http://github.hubspot.com/pace/docs/welcome/)。它确实如此,并使它很容易定制!