gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 08:08:39 25 4
gpt4 key购买 nike

我想使用 jQuery 进度条并仅在页面加载时将其添加到页面顶部(然后使其消失),这种行为在某种程度上类似于 GitHub 中的进度条:

enter image description here .

我该怎么做?

我目前有以下 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) 进度完成后

就是这样!很简单!

关于jquery-ui - jQuery UI - 如何在加载时在页面顶部显示进度条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49093813/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com