[Pace.js] 페이지 상단에 로딩바 간단하게 구현 > 그누보드5 팁자료실

그누보드5 팁자료실

[Pace.js] 페이지 상단에 로딩바 간단하게 구현 정보

[Pace.js] 페이지 상단에 로딩바 간단하게 구현

첨부파일

pace.js (25.9K) 125회 다운로드 2019-08-29 14:40:14

본문

1754226440_1567056605.4818.png

위와같은 형태 입니다.

 

01. 첨부된 js파일을 js폴더로 업로드 합니다.

02. head.sub.php 이나 haed.php 로 필요한곳에 js파일을 불러옵니다.

테마의경우 <script src="<?php echo G5_THEME_URL ?>/js/pace.js"></script>

아닌경우 <script src="<?php echo G5_URL ?>/js/pace.js"></script>

03. 스타일을 줍니다.

 


.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #FF6600;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}

 

끝입니다. 참 쉽죠..

가짜(?)로딩이 아니라 실제 페이지가 로딩된 값에따라 pace.js 파일에서 처리해서

위에 캡쳐처럼 상단에서 프로그래스바로 보여줍니다.

색상은 background: #FF6600; 부분을 수정해주시면 됩니다.

좀 더 두껍게 하고싶으시면 height: 2px; 부분을 수정해주시면 됩니다.

 

@킹스웨어님 께서 주신 내용

.pace .pace-progress 클래스에 추가하면 좀더 부드럽게~

 


.pace .pace-progress {
  background: #FF6600;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
 
/* 추가 */
  -webkit-transition: all .1s;
  -moz-transition: all .1s;
  transition: all .1s;
}

 

개발자 제공페이지 : https://github.hubspot.com/pace/docs/welcome/

추천
13

댓글 32개

.pace .pace-progress 클래스에
{-webkit-transition: all .1s;
  -moz-transition: all .1s;
  transition: all .1s;}
를 추가하면 로딩게이지가 좀 더 부드러워집니다. (값을 높히면 게이지 올라가는 도중 사라집니다.)
저는 왜 아무 변화가 없을까요~ ㅠ ㅜ
줘도 못쓰는 이심정....

head.php 어디쯤
<script src="<?php echo G5_URL ?>/js/pace.js"></script> 을 넣어야 하고?


.pace {
  -webkit-pointer-events: none;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.pace-inactive {
  display: none;
}
.pace .pace-progress {
  background: #FF6600;
  position: fixed;
  z-index: 2000;
  top: 0;
  right: 100%;
  width: 100%;
  height: 2px;
}
이건 어디다 넣어야 하나요?

참고로 이윰빌더를 쓰고 있습니다.

저도 써보고 싶어요....


우선 첨부드린 js파일 다운받으셔서 그누보드 폴더안에 /js/ 폴더로 업로드하시고
사용중이신 테마나 빌더의 공통 헤더 파일 <body> 바로위에
<script src="<?php echo G5_URL ?>/js/pace.js"></script>
스크립트 넣어주시고 (사용자마다 사용되는 헤더파일이 다르므로.. 운영중이신 테마나 빌더의 공통 상단 파일에 넣어주셔야 합니다.)

마지막으로 운영하시는 테마나 빌더의 css 파일에
위에 스타일 추가해주시면 됩니다.

어려우시면 https://sir.kr/g5_skin/46345 이걸로 응용해보세요~
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT