[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 이걸로 응용해보세요~
게시판 목록
그누보드5 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4427 | ||
| 2634 | 6개월 전 | 610 | ||
| 2633 | 6개월 전 | 601 | ||
| 2632 |
 bank365 |
6개월 전 | 510 | |
| 2631 | 7개월 전 | 572 | ||
| 2630 |
세르반데스
|
7개월 전 | 538 | |
| 2629 | 7개월 전 | 729 | ||
| 2628 | 7개월 전 | 412 | ||
| 2627 | 7개월 전 | 421 | ||
| 2626 |
이슈DEV
|
7개월 전 | 642 | |
| 2625 |
welcome
|
7개월 전 | 648 | |
| 2624 |
이슈DEV
|
7개월 전 | 449 | |
| 2623 | 7개월 전 | 409 | ||
| 2622 | 7개월 전 | 496 | ||
| 2621 | 7개월 전 | 354 | ||
| 2620 |
 cdisk1 |
7개월 전 | 370 | |
| 2619 | 7개월 전 | 479 | ||
| 2618 | 7개월 전 | 466 | ||
| 2617 | 7개월 전 | 556 | ||
| 2616 | 7개월 전 | 680 | ||
| 2615 | 8개월 전 | 584 | ||
| 2614 | 8개월 전 | 411 | ||
| 2613 |
바닐라코드
|
8개월 전 | 732 | |
| 2612 | 8개월 전 | 596 | ||
| 2611 | 8개월 전 | 733 | ||
| 2610 | 8개월 전 | 970 | ||
| 2609 | 8개월 전 | 509 | ||
| 2608 | 8개월 전 | 654 | ||
| 2607 | 8개월 전 | 632 | ||
| 2606 | 8개월 전 | 578 | ||
| 2605 | 8개월 전 | 604 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기