发布作者: _北海彡
百度收录: 正在检测是否收录...
最后更新: 2025年 03月 01日 21:55
作品采用: 《 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 》许可协议授权
搓出定制的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>
这些代码放在 <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}
语言简洁明快,用词精准,毫无赘余。
文章结构紧凑,层次分明,逻辑严密,让人一读即懂。