jquery 플러그인 NProgress.js는 웹 페이지 로딩 진행률 bar_jquery를 생성합니다.

NProgress.js는 사실적인 가는 선 애니메이션을 사용하여 사용자가 웹 페이지에서 무슨 일이 일어나고 있는지 볼 수 있게 해주는 매우 얇은 나노 크기의 진행 표시줄입니다!

YouTube에서 페이지를 전환할 때 나타나는 빨간색 레이저 펄스를 본 적이 있을 것입니다. 실제로 많은 모바일 브라우저의 진행 표시줄에 이런 스타일이 있지만 웹페이지에서 구현하는 경우는 거의 없습니다. 그러나 NProgress jQuery 플러그인을 사용하면 쉽게 이를 달성할 수 있습니다!

NProgress.js는 복잡한 웹페이지의 슬림한 진행바에 적용됩니다. Google, YouTube, Medium에서 영감을 얻었습니다.

설치

jQuery(버전 1.8 이상)에 따라 nprogress.js 및 nprogress.css를 프로젝트에 추가하세요.

사용방법

NProgress.start() — 진행률 표시줄 표시

NProgress.set(0.4) —백분율 설정

NProgress.inc() — 약간 추가

NProgress.done() — 완료 진행률 표시줄

또한...
Ajax를 호출하는 곳에 추가하세요! jQuery ajaxStart 및 ajaxStop 이벤트에 바인딩
Turbolinks/Pjax 없이 멋진 진행률 표시줄을 만들어보세요! $(document).ready 및 $(window).load
에 바인딩합니다.

구성 플러그인

최소 비율을 최소로 수정하세요.

NProgress.configure({ 최소: 0.1 });

템플릿을 통해 마크업 구조를 수정할 수 있습니다. 진행률 표시줄이 제대로 작동하려면 role='bar' 속성을 포함하는 요소가 필요합니다.

NProgress.configure({ 템플릿: "..." });

Easy(CSS의 easing 값)를 통해 애니메이션 설정 및 속도(밀리초)를 조정합니다.

NProgress.configure({ easy: 'ease', speed: 500 });

진행률 표시줄 단계를 끄고 싶으십니까? 물방울을 false로 설정하세요.

NProgress.configure({ 물방울: false });

trickleRate(각 단계가 증가하는 정도) 및 trickleSpeed ​​​​(단계 간격, 밀리초 ms 단위)를 조정할 수 있습니다.

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

진행률 링을 비활성화하고 싶으십니까? showSpinner를 false로 설정합니다.

NProgress.configure({ showSpinner: false });

온라인 데모 http://ricostacruz.com/nprogress/

소스코드 다운로드https://github.com/rstacruz/nprogress