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

【问题标题】：jQuery UI - how to show progress bar on top of page just when loadingjQuery UI - 如何在加载时在页面顶部显示进度条
【发布时间】：2018-03-04 09:15:06
【问题描述】：

我想使用 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
});

【问题讨论】：

标签： jquery-ui progress-bar

【解决方案1】：

我建议您使用NProgress。它没有使用 jQuery-UI，但它非常纤薄且易于集成。我在几个项目中使用过它，效果很好。

使用 NProgress，您不必拥有 HTML 代码，您只需要运行以下几行：

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

就是这样！很简单！

【讨论】：

谢谢！这正是我一直在寻找的！

【解决方案2】：

我建议使用 PACE (http://github.hubspot.com/pace/docs/welcome/)。它正是这样做的，并且非常容易定制！

【讨论】：

谢谢！是否可以自己控制进度而不让它自动进行？