[Pace.js] 페이지 상단에 로딩바 간단하게 구현 정보
[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. 스타일을 줍니다.
.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
13
댓글 32개
좋은팁 감사합니다.
감사합니다!
뎃글쓰기에 찾아보기가 있는곳은 없나요
만들어주세요
엇? 음? 어떤스킨이죠? ㅎㅎ;
오우 감사합니다~
꾸벅꾸벅!
정말 유용한 팁이네요~~
감사히 잘 쓰겠습니다.^^
감사히 잘 쓰겠습니다.^^
ㅎㅎ 감사합니다 잘쓰셔요
감사합니다~
감사합니다~
공개해 주셔서 감사합니다.
감사합니다~!
좋은자료 공유해주셔서 감사합니다~
감사합니다 ^^
무엇보다 간편하게 적용할 수 있다는게 매우 좋습니다! 항상 좋은자료 응원합니다 v
좋은말씀 고맙습니다! ^^ 댓글덕분에 힘이 납니다~
감사합니다. 아주 멋진 프로그램이네요^^
ㅎㅎ 감사합니다~
감사합니다 잘쓰겠습니다.
잘쓰셔요~
좋은 팁 감사합니다
감사합니다~
.pace .pace-progress 클래스에
{-webkit-transition: all .1s;
-moz-transition: all .1s;
transition: all .1s;}
를 추가하면 로딩게이지가 좀 더 부드러워집니다. (값을 높히면 게이지 올라가는 도중 사라집니다.)
{-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;
}
이건 어디다 넣어야 하나요?
참고로 이윰빌더를 쓰고 있습니다.
저도 써보고 싶어요....
줘도 못쓰는 이심정....
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 이걸로 응용해보세요~
우선 첨부드린 js파일 다운받으셔서 그누보드 폴더안에 /js/ 폴더로 업로드하시고
사용중이신 테마나 빌더의 공통 헤더 파일 <body> 바로위에
<script src="<?php echo G5_URL ?>/js/pace.js"></script>
스크립트 넣어주시고 (사용자마다 사용되는 헤더파일이 다르므로.. 운영중이신 테마나 빌더의 공통 상단 파일에 넣어주셔야 합니다.)
마지막으로 운영하시는 테마나 빌더의 css 파일에
위에 스타일 추가해주시면 됩니다.
어려우시면 https://sir.kr/g5_skin/46345 이걸로 응용해보세요~