Progress 로딩바
본문
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
background-color:#E2EBED;
margin:0px;
padding:0px;
height:100%;
width:100%;
line-height:130%;
font-size:0.9em;
text-align:center;
}
#pageContent{
width:760px;
margin:0 auto;
text-align:left;
border-left:1px solid #000;
border-right:1px solid #000;
background-color:#FFF;
height:100%;
}
#pageContent p{
padding-left:10px;
padding-right:10px;
}
#dhtmlgoodies_progressPane{
width:100%;
height:100%;
background-color:#FFF;
z-index:5000;
position:absolute;
left:0px;
top:0px;
}
#dhtmlgoodies_progressBar_bg{
position:absolute;
left:50%;
top:50%;
width:300px;
height:20px;
border:1px solid #000;
background-color:#EEE;
margin-left:-150px;
margin-top:-20px;
text-align:center;
}
#dhtmlgoodies_progressBar_outer{
position:absolute;
left:0px;
top:0px;
width:0px;
height:100%;
overflow:hidden;
}
#dhtmlgoodies_progressBar{
position:absolute;
left:0px;
top:0px;
width:300px;
background-color:#184EB8;
filter: Alpha(Opacity=0, FinishOpacity=100,Style=1,StartX=0, StartY=0, FinishX=200,FinishY=20) ;
height:100%;
z-index:5000;
}
#dhtmlgoodies_progressBar_txt{
color:#000;
z-index:10000;
width:100%;
height:100%;
left:0px;
top:0px;
position:absolute;
font-family:arial;
font-size:0.8em;
line-height:20px; /* Same as height of progress bar */
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var progressbar_steps = 50; // Total number of progress bar steps.
/* Don't change any of these variables */
var dhtmlgoodies_progressPane = false;
var dhtmlgoodies_progressBar_bg = false;
var dhtmlgoodies_progressBar_outer = false;
var dhtmlgoodies_progressBar_txt = false;
var progressbarWidth;
var currentStep = 0;
function moveProgressBar(steps){
if(!dhtmlgoodies_progressBar_bg){
dhtmlgoodies_progressPane = document.getElementById('dhtmlgoodies_progressPane');
dhtmlgoodies_progressBar_bg = document.getElementById('dhtmlgoodies_progressBar_bg');
dhtmlgoodies_progressBar_outer = document.getElementById('dhtmlgoodies_progressBar_outer');
dhtmlgoodies_progressBar_txt = document.getElementById('dhtmlgoodies_progressBar_txt');
progressbarWidth = dhtmlgoodies_progressBar_bg.clientWidth;
}
if(!steps){
dhtmlgoodies_progressBar_outer.style.width = progressbarWidth + 'px';
dhtmlgoodies_progressBar_txt.innerHTML = '100%';
setTimeout('document.getElementById("dhtmlgoodies_progressPane").style.display="none"',50);
}else{
currentStep+=steps;
if(currentStep>progressbar_steps)currentStep = progressbar_steps;
var width = Math.ceil(progressbarWidth * (currentStep / progressbar_steps));
dhtmlgoodies_progressBar_outer.style.width = width + 'px';
var percent = Math.ceil((currentStep / progressbar_steps)*100);
dhtmlgoodies_progressBar_txt.innerHTML = percent + '%';
if(currentStep==progressbar_steps){
setTimeout('document.getElementById("dhtmlgoodies_progressPane").style.display="none"',50);
}
}
}
/* The function below is only needed for this demo
To move the progress bar , call the function moveProgressBar()
example:
moveProgressBar(1)
to move it one step.
*/
function demoProgressBar()
{
if(currentStep<progressbar_steps){
moveProgressBar(1);
setTimeout('demoProgressBar()',100);
}
}
window.onload = demoProgressBar;
</script>
</HEAD>
<BODY>
<div id="dhtmlgoodies_progressPane">
<div id="dhtmlgoodies_progressBar_bg">
<div id="dhtmlgoodies_progressBar_outer">
<div id="dhtmlgoodies_progressBar"></div>
</div>
<div id="dhtmlgoodies_progressBar_txt">0 %</div>
</div>
</div>
<div id="pageContent">
<p>메인페이지</p>
</div>
</BODY>
</HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style type="text/css">
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
background-color:#E2EBED;
margin:0px;
padding:0px;
height:100%;
width:100%;
line-height:130%;
font-size:0.9em;
text-align:center;
}
#pageContent{
width:760px;
margin:0 auto;
text-align:left;
border-left:1px solid #000;
border-right:1px solid #000;
background-color:#FFF;
height:100%;
}
#pageContent p{
padding-left:10px;
padding-right:10px;
}
#dhtmlgoodies_progressPane{
width:100%;
height:100%;
background-color:#FFF;
z-index:5000;
position:absolute;
left:0px;
top:0px;
}
#dhtmlgoodies_progressBar_bg{
position:absolute;
left:50%;
top:50%;
width:300px;
height:20px;
border:1px solid #000;
background-color:#EEE;
margin-left:-150px;
margin-top:-20px;
text-align:center;
}
#dhtmlgoodies_progressBar_outer{
position:absolute;
left:0px;
top:0px;
width:0px;
height:100%;
overflow:hidden;
}
#dhtmlgoodies_progressBar{
position:absolute;
left:0px;
top:0px;
width:300px;
background-color:#184EB8;
filter: Alpha(Opacity=0, FinishOpacity=100,Style=1,StartX=0, StartY=0, FinishX=200,FinishY=20) ;
height:100%;
z-index:5000;
}
#dhtmlgoodies_progressBar_txt{
color:#000;
z-index:10000;
width:100%;
height:100%;
left:0px;
top:0px;
position:absolute;
font-family:arial;
font-size:0.8em;
line-height:20px; /* Same as height of progress bar */
}
</style>
<script type="text/javascript">
/************************************************************************************************************
(C) www.dhtmlgoodies.com, October 2005
This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.
Terms of use:
You are free to use this script as long as the copyright message is kept intact. However, you may not
redistribute, sell or repost it without our permission.
Thank you!
www.dhtmlgoodies.com
Alf Magne Kalleland
************************************************************************************************************/
var progressbar_steps = 50; // Total number of progress bar steps.
/* Don't change any of these variables */
var dhtmlgoodies_progressPane = false;
var dhtmlgoodies_progressBar_bg = false;
var dhtmlgoodies_progressBar_outer = false;
var dhtmlgoodies_progressBar_txt = false;
var progressbarWidth;
var currentStep = 0;
function moveProgressBar(steps){
if(!dhtmlgoodies_progressBar_bg){
dhtmlgoodies_progressPane = document.getElementById('dhtmlgoodies_progressPane');
dhtmlgoodies_progressBar_bg = document.getElementById('dhtmlgoodies_progressBar_bg');
dhtmlgoodies_progressBar_outer = document.getElementById('dhtmlgoodies_progressBar_outer');
dhtmlgoodies_progressBar_txt = document.getElementById('dhtmlgoodies_progressBar_txt');
progressbarWidth = dhtmlgoodies_progressBar_bg.clientWidth;
}
if(!steps){
dhtmlgoodies_progressBar_outer.style.width = progressbarWidth + 'px';
dhtmlgoodies_progressBar_txt.innerHTML = '100%';
setTimeout('document.getElementById("dhtmlgoodies_progressPane").style.display="none"',50);
}else{
currentStep+=steps;
if(currentStep>progressbar_steps)currentStep = progressbar_steps;
var width = Math.ceil(progressbarWidth * (currentStep / progressbar_steps));
dhtmlgoodies_progressBar_outer.style.width = width + 'px';
var percent = Math.ceil((currentStep / progressbar_steps)*100);
dhtmlgoodies_progressBar_txt.innerHTML = percent + '%';
if(currentStep==progressbar_steps){
setTimeout('document.getElementById("dhtmlgoodies_progressPane").style.display="none"',50);
}
}
}
/* The function below is only needed for this demo
To move the progress bar , call the function moveProgressBar()
example:
moveProgressBar(1)
to move it one step.
*/
function demoProgressBar()
{
if(currentStep<progressbar_steps){
moveProgressBar(1);
setTimeout('demoProgressBar()',100);
}
}
window.onload = demoProgressBar;
</script>
</HEAD>
<BODY>
<div id="dhtmlgoodies_progressPane">
<div id="dhtmlgoodies_progressBar_bg">
<div id="dhtmlgoodies_progressBar_outer">
<div id="dhtmlgoodies_progressBar"></div>
</div>
<div id="dhtmlgoodies_progressBar_txt">0 %</div>
</div>
</div>
<div id="pageContent">
<p>메인페이지</p>
</div>
</BODY>
</HTML>
출처 : http://www.aircon1004.com/data/bbs/board.php?bo_table=pds1&wr_id=188
관련링크
댓글목록
등록된 댓글이 없습니다.