모바일 브라우저 모양의 로딩바.
한 2년 정도를 쓴거 또 쓰고 했더니 이제 풀어 놓아도 될 듯해서 올려 봅니다. 간단해서 따로 설명이 필요 없겠죠? G5에도 확인했답니다.
DEMO : http://anunnaki.nflint.com/
CODE : (아래 내용이 다 입니다.G4, G5 공통 적용됨)
<style>
/*------------------------------------// 로딩바 //----------------------------------------*/
#loading2 { left:0px; top:0px; width:100%; height:8px; position:absolute; z-index:99999; }
#loading2 div { background-color:#00d2ff; height:8px; display: none; }
/*----------------------------------------------------------------------------------------*/
</style>
<!------------------------------------// 로딩바 //---------------------------------------->
<DIV style="display: none;" id="loading2">
<DIV style="width: 0%; float:left; display: block;"></DIV>
</DIV>
<SCRIPT type="text/javascript">
$("#loading2").show();
$("#loading2 div").animate({width:"10%"});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
<SCRIPT type="text/javascript">$("#loading2 div").animate({width:"100%"}, function() {
setTimeout(function() {
$("#loading2").hide();
}, 1000);
});
//처음으로 돌아 가기
scrolltotop.init({pageWidth:null,startline:10,controlOffsetX:0,controlOffsetY:0});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
* 효과를 잘 보시라고 8px로 잡았는데 저는 보통 보일락 말락한 2px로 작업해 올리고는 합니다.
(오페라 빼고는 다 적용됨)
DEMO : http://anunnaki.nflint.com/
CODE : (아래 내용이 다 입니다.G4, G5 공통 적용됨)
<style>
/*------------------------------------// 로딩바 //----------------------------------------*/
#loading2 { left:0px; top:0px; width:100%; height:8px; position:absolute; z-index:99999; }
#loading2 div { background-color:#00d2ff; height:8px; display: none; }
/*----------------------------------------------------------------------------------------*/
</style>
<!------------------------------------// 로딩바 //---------------------------------------->
<DIV style="display: none;" id="loading2">
<DIV style="width: 0%; float:left; display: block;"></DIV>
</DIV>
<SCRIPT type="text/javascript">
$("#loading2").show();
$("#loading2 div").animate({width:"10%"});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
<SCRIPT type="text/javascript">$("#loading2 div").animate({width:"100%"}, function() {
setTimeout(function() {
$("#loading2").hide();
}, 1000);
});
//처음으로 돌아 가기
scrolltotop.init({pageWidth:null,startline:10,controlOffsetX:0,controlOffsetY:0});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
* 효과를 잘 보시라고 8px로 잡았는데 저는 보통 보일락 말락한 2px로 작업해 올리고는 합니다.
(오페라 빼고는 다 적용됨)
첨부파일
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 14개
어디에 넣어주면 되나요?
'head.php'의 '상단 시작' 부분에 넣어주니 잘 구현되기는 합니다만...
<!------------------------------------// 로딩바 //---------------------------------------->
<DIV style="display: none;" id="loading2">
<DIV style="width: 0%; float:left; display: block;"></DIV>
</DIV>
<SCRIPT type="text/javascript">
$("#loading2").show();
$("#loading2 div").animate({width:"10%"});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
<SCRIPT type="text/javascript">$("#loading2 div").animate({width:"100%"}, function() {
setTimeout(function() {
$("#loading2").hide();
}, 1000);
});
//처음으로 돌아 가기
scrolltotop.init({pageWidth:null,startline:10,controlOffsetX:0,controlOffsetY:0});
</SCRIPT>
<!---------------------------------------------------------------------------------------->
G5기준 default.css에
/*------------------------------------// 로딩바 //----------------------------------------*/
#loading2 { left:0px; top:0px; width:100%; height:8px; position:absolute; z-index:99999; }
#loading2 div { background-color:#00d2ff; height:8px; display: none; }
/*----------------------------------------------------------------------------------------*/
위의 두줄 넣어 주면 됩니다. z-index를 높게 잡아 놓아서 어지간하면 다 구현되야 정상입니다.
혹시라도 보이지 않는다면 관계하는 div의 "position:absolute"나 "z-index"의 연관성을 생각해 보시면 바로
답이 나올겁니다.
쉽게 구현하시려면 G5기준 25라인이나 26라인 부근
<!-- 상단 시작 { -->
<div id="hd">
의 위쪽에 넣고 해보세요.
그런데... 여태 정적이다가... 페이지 전환시 마다 움직임이 생기니 아직 적응이 잘 안되네요~^^
높이는 2px로 줄였습니다.
.loading { left:0; top:0; width:100%; height:8px; display:none;}
.loading div { background-color:#00aaaa; height:8px; width:0%; float:left; display:block; }
</style>
<div class="loading"><div></div></div>
<script type="text/javascript">
$(".loading").fadeIn(2000);
$(".loading div").animate({width:"10%"});
$(".loading div").animate({width:"100%"}, function() {
setTimeout(function() {
$(".loading").fadeOut(1000);
}, 1000);
});
scrolltotop.init({pageWidth:null,startline:10,controlOffsetX:0,controlOffsetY:0});
</script>
부드럽게 처리하고 싶어서 이렇게 수정했습니다.^^..
감사합니다.
감사합니다.!!!
감사합니다^^