[Pace.js] 페이지 상단에 로딩바 간단하게 구현
위와같은 형태 입니다.
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개
뎃글쓰기에 찾아보기가 있는곳은 없나요
만들어주세요
감사히 잘 쓰겠습니다.^^
{-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 이걸로 응용해보세요~