> For the complete documentation index, see [llms.txt](https://close.gitbook.io/yun-wei-bi-ji/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://close.gitbook.io/yun-wei-bi-ji/centos/vue/xiang-mu/2-01.-quan-ju-loading-jin-du-tiao-shi-xian.md).

# 2 01.全局loading进度条实现

* #### 安装

> <https://www.npmjs.com/package/nprogress>

```js
npm install --save nprogress
```

* #### 引入入口文件

```js
// main.js

import 'nprogress/nprogress.css'
```

* #### 封装进度条

```js
// src/composables/util.js

...略
// 显示全屏 loading
export function showFullLoading() {
    nprogress.start()
}

// 隐藏全屏 loading
export function showFullLoading() {
    nprogress.done()
}



```

* #### 全局前后守卫中使用

```js
import { toast,showFullLoading,hideFullLoading } from '~/composables/util'

//前置守卫
router.beforeEach(async (to, from, next) => {

    showFullLoading()
})


//后置守卫
router.afterEach((to,from)=> hideFullLoading())
```

* #### 自定义加载颜色

> App.vue

```js

<style>

#nprogress .bar {
  background-color: #f4f4f4 !important;
  height: 3px !important;
}

</style>

```

<div><img src="C:%5CUsers%5CAdministrator.DESKTOP-UK43ECI%5CAppData%5CRoaming%5Cmarktext%5Cimages%5C2023-02-20-14-36-08-image.png" alt=""> <figure><img src="/files/zEmGHHujpRUyzF2ebbPr" alt=""><figcaption></figcaption></figure></div>