vue使用线性加载进度条 nprogress.js

官网地址
npm 地址


  1. 安装/引用

  • 传统项目直接使用标签引用

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

  • nodejs 安装   npm/bower

bower install --save nprogress
# 或者
npm install --save nprogress

  • nodejs 引用(前提是在已经使用上面的方法安装之后了)

import NProgress from 'nprogress' // Progress 进度条
import 'nprogress/nprogress.css' // Progress 进度条样式

  1. 使用方法

NProgress.start() - 显示进度条
NProgress.set(0.4) - 设置百分比
NProgress.inc() - 稍微增加
NProgress.done() - 完成进度(进度条消失)

3.修改颜色

需要在css文件中进行修改


使用的样式

Jsky博客


转载地址：https://www.jianshu.com/p/e96f338a0a1c?from=timeline&isappinstalled=0

Jsky博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论