{/tabs-pane} {tabs-pane label="支付宝"}
{/tabs-pane} {tabs-pane label="ＱＱ"}
{/tabs-pane} 发布作者： _北海彡
百度收录： 正在检测是否收录...
最后更新： 2025年 03月 01日 21:55
作品采用： 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
进度条实时加载和Ajax显示Nprogress.js库定制用法web小组件
2025年03月01日 47阅读 3评论 1点赞
搓出定制的Nprogress.js库加载条，拿出来分享分享。很简单两步就可以为你的网站添一道色彩，增加用户体验.有能力的大佬二改分享在评论区哦.
图片显示
引入Nprogress.js库
无需下载，使用CDN方式就可以引入.
请将此代码放在 <head> 标签内.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress/nprogress.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/nprogress/nprogress.js"></script>配置、定制样式、加载和Ajax
这些代码放在 <body> 标签内即可大功告成.将下面代码样式最好将 <style> 至 </style> 的两个标签及内容剪切到 <head> 标签内，这样有助于进度条最先显示.
<style>
/* 彩色渐变进度条 */
#nprogress .bar {
/* 设置渐变背景色 */
background: linear - gradient(90deg, red, orange, yellow, green, blue, indigo, violet) !important;
/* 加粗进度条，例如设置为8px高度 */
height: 8px !important;
/* 添加模糊效果，这里使用filter的blur属性 */
filter: blur(1px) !important;
/* 添加阴影效果 */
box - shadow: 0px 2px 5px rgba(0, 0, 0, 0.5) !important;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/nprogress/nprogress.js"></script>
<script>
// NProgress 配置
NProgress.configure({
minimum: 0.3, // 设置进度条开始时的最小百分比
easing: 'ease', // 设置进度条动画的缓冲效果
speed: 500, // 设置进度条动画的速度（毫秒）
trickle: true, // 开启自动递增行为
trickleSpeed: 200, // 设置进度条递增的速度（毫秒）
showSpinner: false // 隐藏右上角的旋转动画
});
// 页面加载时触发 NProgress
NProgress.start();
$(window).load(function() {
NProgress.done();
});
// Ajax 请求时触发 NProgress
$(document).ajaxStart(function() {
NProgress.start();
});
$(document).ajaxStop(function() {
NProgress.done();
});
</script>
就是这些了，喜欢就点个赞吧！
当然还可以提问题啊
{collapse}
{collapse-item label="邮箱" open}
bh_lg-01@outlook.com
{/collapse-item}
—— 评论区 ——
38 文章数
13 标签数
223 评论量
人生倒计时
最新评论
-
8天前 - 8天前
- 9天前
- 10天前
- 10天前
舔狗日记
语言简洁明快，用词精准，毫无赘余。
文章结构紧凑，层次分明，逻辑严密，让人一读即懂。