progress bar 라이브러리 사용
라이브러리 사용을 위해 CDN 이용
script(src="https://cdn.jsdelivr.net/gh/rikmms/progress-bar-4-axios@master/dist/index.js")
link(rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/rikmms/progress-bar-4-axios/0a3acf92/dist/nprogress.css")
axios에 progressbar 적용하기
엄청 쉽다. loadProgressBar()만 넣어주면 끝이다.
loadProgressBar()
await axios({
method: 'post',
headers: {
'Content-Type': 'application/json',
},
url: '/api/test',
data: {dateValue}
}) .... //
이렇게 상단에 막대기 바와 원이 움직인다.
progressbar css
#nprogress .bar {
background: rgb(25, 114, 248) !important;
}
#nprogress .peg {
box-shadow: 0 0 10px rgb(25, 114, 248), 0 0 5px rgb(25, 114, 248) !important;
}
#nprogress .spinner-icon {
border-top-color: rgb(25, 114, 248) !important;
border-left-color: rgb(25, 114, 248) !important;
}
참조 progress bar npm 사이트
https://www.npmjs.com/package/axios-progress-bar