壹影博客.
我在下午4点钟开始想你
Js页面进度条加载插件-NProgress
  • 2023-2-17日
  • 0评论
  • 683围观

Js页面进度条加载插件-NProgress

NProgress.Js是一款页面顶部进度条的插件,可以给你的页面顶部加一个渐变式缓冲进度条,看起来还不错

官网:点我跳转
githup:点我跳转

如何使用?

该插件需要引入jquery,使用其实非常简单,去官网下载两个主要文件
1.nprogress.js
2.nprogress.css

将两个文件引入至页面头部即可使用

<script data-no-instant src="nprogress.js"></script>
<link rel="stylesheet" href="nprogress.css">

<!--如果你的网页没有引入jquery 还需要引入-->
<script data-no-instant src="jquery.min.js"></script>

如果你觉得githup下载文件较慢,或者打不开可以直接下载本页面的Js、css
链接如下

nprogress.js:点我下载
nprogress.css:点我下载
jquery.min.js:点我下载

然后再网页内添加如下script标签即可

   <script>
    $('body').show();
    $('.version').text(NProgress.version);
    NProgress.start();
    setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 1000);
  </script>

By 壹影~

发表评论