我们在一些网站中经常见到导航栏上方的进度条显示，大家仔细观察，其实csnd中也有类似的效果，如下图显示效果，我们现在就来一起看看这个功能需求是怎么实现的。

 

 一、功能需求

        首先，实现这个功能其实不难，说实在点其实就是个动画效果，大家在学习原生js中的时候应该都接触过来控制动画的移动，无非就是让一个小的长方形盒子慢慢的边长，通过js来完全可以实现。但是我们这个是项目是vue，在vue中不需要我们自己去操作DOM，所以我们就使用一款轻量级的进度条插件，就是NProgress。

NProgress的官方网址:https://ricostacruz.com/nprogress/

二、使用方法

        在vue中，先引入所需要的插件：

npm i nprogress

下载安装完成后在vue中使用即可：

//导入进度条模块
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.start()//显示上方进度条
NProgress.inc() //进度条加一
NProgress.done()//结束进度条

改进度条颜色配置如下：

<style>
// 自定义进度条颜色
 #nprogress .bar {
     background: #F811B2 !important; //自定义颜色
  }
</style>

项目中常用就是如此，很简单吧！！！