안녕하세요
이번에 소개 드릴건 자동으로 로딩바를 만들어 주는 PACE JS 라는 라이브러리 입니다.
Javascript 라이브러리와 css만 추가하면 알아서 로딩바를 만들어 줍니다.
jquery에 dependency는 없어 보입니다.
이 라이브러리는 지금 trandent.com에도 적용 되어 있습니다.
단점은 새로운 페이지 로딩을 시작하면 로딩바가 생성 되기 때문에 브라우저 로딩바 처럼 특정 액션을 하는 경우부터 시작하는것과는 다릅니다.
하지만 간편하게 적용하여 페이지 로딩이나 ajax 호출 로딩 상태를 가시적으로 볼수 있다는 장점이 있습니다.
PACE : https://github.hubspot.com/pace/docs/welcome/
위 링크를 들어가면 다운로드 가능합니다. 사이트는 크롬에 최적화 되어있는듯 보입니다. 익스플로러로 접속시 샘플이 보이지 않습니다.
사이트를 들어가면 위와같이 컬러를 선택하고 로딩바 스타일을 보고 다운 받을 수 있습니다.
Github : https://github.com/HubSpot/PACE
위 주소는 깃허브 주소이고 프로젝트가 올라가 있습니다.
사용방법은
예제와 같이 스크립트와 CSS만 넣어주면 자동으로 동작 하며
옵션을 통해 ajax, element, document ready 상태 등의 체크여부를 켜고 끌 수 있습니다.
Document : https://github.hubspot.com/pace/
