We often see the progress bar display above the navigation bar in some websites. If you observe carefully, in fact, csnd also has a similar effect, as shown in the figure below. Let’s now take a look at how this functional requirement is realized.
1. Functional requirements
First of all, it is not difficult to realize this function. To be honest, it is actually an animation effect. When you are learning native js, you should come into contact with it to control the movement of the animation. It is nothing more than making a small rectangular box slowly grow side by side. js is fully achievable. But our project is vue, and we don't need to operate the DOM in vue, so we use a lightweight progress bar plug-in, which is NProgress.
Official website of NProgress : https://ricostacruz.com/nprogress/
2. How to use
In vue, first introduce the required plug-ins:
npm i nprogress
After downloading and installing, use it in vue:
//导入进度条模块
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'NProgress.start()//显示上方进度条
NProgress.inc() //进度条加一
NProgress.done()//结束进度条The color configuration of the improvement bar is as follows:
<style>
// 自定义进度条颜色
#nprogress .bar {
background: #F811B2 !important; //自定义颜色
}
</style>This is how it is commonly used in projects, it's very simple! ! !