jQuery UI-加载时如何在页面顶部显示进度条

fx2*_*x23 2 jquery-ui progress-bar

我想使用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>
Run Code Online (Sandbox Code Playgroud)

Javascript:

$('#progressbar').progressbar({
    value: false
});
Run Code Online (Sandbox Code Playgroud)

小智 5

我建议您使用NProgress。它没有使用jQuery-UI,但是非常苗条且易于集成。我已经在几个项目中使用过它,并且效果很好。

使用NProgress,您不必具有HTML代码,只需运行以下行:

  • NProgress.configure() 如果您需要一些特殊的配置
  • NProgress.start() 启动进度条
  • NProgress.inc() 增加进度
  • NProgress.done(true) 一旦进度完成

而已!很容易!