侧边栏壁纸

进度条实时加载和Ajax显示Nprogress.js库定制用法web小组件

2025年03月01日 46阅读 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}

1
打赏

—— 评论区 ——

昵称
邮箱
网址
取消
  1. 头像
    1814081081
    Android 11   ViVO浏览器 23
    回复

    QQQQ

  2. 头像
    ompohfxshn
    Windows 10 x64 Edition   搜狗高速浏览器
    回复

    语言简洁明快,用词精准,毫无赘余。

  3. 头像
    lfwdphksfm
    Windows 10 x64 Edition   搜狗高速浏览器
    回复

    文章结构紧凑,层次分明,逻辑严密,让人一读即懂。

人生倒计时
舔狗日记

海云博客公告

海云博客、云服务、API、霹雳霹雳、百宝箱、LGZ、影视、卡密网等由于特殊原因将于2025年3月-6月末暂时停更停维护



博客先这样吧,在搞子比很快就好了
欢迎!
一天只弹一次
朕已阅

Warning: Invalid argument supplied for foreach() in /www/wwwroot/mnbt.20739403/usr/plugins/Clogin/Plugin.php on line 158