[Vue.js/라이브러리] NProgress

 

이렇게 상단에 로딩바를 띄울 수 있다.

 

 

◽ Nprogress란?

로딩표시를 위한 라이브러리이다.

 

 

◽ 설치하기

1) npm

$ npm install vue-nprogress

 

2) CDN 방식

nprogress - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers

 

 

◽ 예제

📄 js

import NProgress from "nprogress";
import "nprogress/nprogress.css"; // css까지 import 해주어야 한다.

router.beforeEach(() => {
	NProgress.start();
    // 라우터 로직 ...
	NProgress.done();
})

 

📄 css - 로딩바 색상을 바꿔야하는 경우

#nprogress .bar {
  background-color: #CBC0D3;
}

#nprogress .peg {
  box-shadow: 0 0 10px #CBC0D3, 0 0 5px #CBC0D3;
}

 

 

 

출처 및 참조

https://github.com/rstacruz/nprogress

 

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.