aixos progress bar 구현

Woohyun·2022년 10월 24일
0

NodeJS

목록 보기
5/5

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

profile
개발자 지망생

0개의 댓글