LearnApplyShare

nprogress 소개

November 02, 2018 - [nprogress]

프론트엔드 개발할 때 언제나 필요한 기능 중 하나가 서버의 응답을 기다리는 동안에 보여줄 진행중 표시이다. 특별히 개발 프레임웍에 종속적이지 않고 모든 웹개발 프로젝트에서 간단히 사용 가능한 nprogress 모듈 사용법을 소개한다.

스크린샷

간단한 사용법은 아래와 같다.


소스코드

<html>
  <head>
    <link
      rel="stylesheet"
      href="https://unpkg.com/nprogress@0.2.0/nprogress.css"
    />
    <script src="https://unpkg.com/nprogress@0.2.0/nprogress.js"></script>
    <style>
      /* spinner 가 디폴트로 오른쪽 상단에 위치하기 때문에 중앙으로 정렬해 준다*/
      #nprogress .spinner {
        top: 50%;
        right: 50%;
      }
    </style>
  </head>
  <body>
    <button id="start">시작</button>
    <button id="end"></button>
    <script>
      document.getElementById("start").onclick = function () {
        NProgress.start()
      }
      document.getElementById("end").onclick = function () {
        NProgress.done()
      }
    </script>
  </body>
</html>

* 실행예제: https://nprogress-rrfckeeegt.now.sh/


Ref.

https://github.com/rstacruz/nprogress