Development/Vue.js
[Vue.js/라이브러리] NProgress
레오나르도 다빈츠
2021. 12. 28. 10:34
◽ 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
Simple slim progress bars - Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 12.5% of all websites, serving over 200 billion requests each month, powered by Cloudflare. We make it faster an
cdnjs.com
◽ 예제
📄 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
개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.