테스트 사이트 - 개발 중인 베타 버전입니다

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

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. 스타일을 줍니다.

 

[code]

.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;
}

[/code]

 

끝입니다. 참 쉽죠..

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

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

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

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

 

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

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

 

[code]

.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;
}

[/code]
 

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

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 32개

좋은팁 감사합니다.
[http://sir.kr/data/editor/1908/2dbd8efb86e4d25b3d5acaecccc6c118_1567076074_2187.jpg]
뎃글쓰기에 찾아보기가 있는곳은 없나요

만들어주세요
엇? 음? 어떤스킨이죠? ㅎㅎ;
오우 감사합니다~
정말 유용한 팁이네요~~
감사히 잘 쓰겠습니다.^^
ㅎㅎ 감사합니다 잘쓰셔요
감사합니다~
공개해 주셔서 감사합니다.
감사합니다~!
좋은자료 공유해주셔서 감사합니다~
감사합니다 ^^
무엇보다 간편하게 적용할 수 있다는게 매우 좋습니다! 항상 좋은자료 응원합니다 v
좋은말씀 고맙습니다! ^^ 댓글덕분에 힘이 납니다~
감사합니다. 아주 멋진 프로그램이네요^^
ㅎㅎ 감사합니다~
감사합니다 잘쓰겠습니다.
좋은 팁 감사합니다
.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 이걸로 응용해보세요~

게시판 목록

그누보드5 팁자료실

글쓰기
🐛 버그신고