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>
[이 게시물은 관리자님에 의해 2011-10-31 16:57:14 JavaScript에서 이동 됨]
게시글 목록
| 번호 | 제목 |
|---|---|
| 11470 |
PHP
64비트용 php5.1
|
| 11469 | |
| 11468 | |
| 11457 | |
| 29100 | |
| 11448 | |
| 11444 |
Flash
화이어폭스에서 플래시투명하게..
3
|
| 24851 | |
| 29091 |
HTML
포토샵팁 73가지
8
|
| 11440 | |
| 11434 |
JavaScript
[팁]웹상이나 포토샵에서 이미지 작업시 필요한 색상이 따로 있는걸 아세요?
5
|
| 11431 | |
| 11420 |
기타
아쿠아틱볼만들기~
10
|
| 11415 | |
| 11412 | |
| 29087 | |
| 11408 | |
| 11402 | |
| 11397 |
JavaScript
PHP에서 성능 개선을 위한 유용한 팁
4
|
| 11389 |
MySQL
PHP 초보적인 질문인데 너무 궁금해서요
7
|
| 11387 | |
| 11383 |
Flash
포토샵에 쓰이는 파일 정보
3
|
| 11375 | |
| 11370 | |
| 11362 |
기타
디카사진 보정효과
7
|
| 11354 |
JavaScript
강렬한 Sketch(스케치) 효과
7
|
| 11349 |
JavaScript
포토샵 단축키 모음
4
|
| 11348 |
JavaScript
셀렉트 박스 이뿌게 꾸미기
|
| 11347 |
JavaScript
데몬 Daemon 설명
|
| 11342 | |
| 11338 |
JavaScript
서버호스팅 트래픽 계산방법
3
|
| 29084 |
HTML
뒷배경을 채우기
2
|
| 11335 |
JavaScript
APM 설치전 필수 라이브러리 다운로드 및 설치
2
|
| 11327 | |
| 11325 |
JavaScript
Alpha 채널을 이용하여 Halftone Dot Image 만들기
1
|
| 11318 | |
| 11312 | |
| 11308 |
기타
사진에 글시 쓰기
3
|
| 11303 | |
| 11300 |
기타
이미지 합성하기
2
|
| 29077 |
HTML
부분 흑백 만들기
6
|
| 24849 | |
| 29075 |
HTML
스크롤바 색상 변경해주는 소스
1
|
| 29070 | |
| 11291 |
JavaScript
재미 있는 네비입니다.
8
|
| 11290 |
JavaScript
mod_rewrite 를 적용하기 위한 http.conf 설정
|
| 11288 | |
| 11285 |
JavaScript
잘 되던 포토샵이 갑자기 실행이 안될때
2
|
| 29068 |
HTML
단축기와 용어/팁
1
|
| 11282 | |
| 11279 | |
| 11271 |
Flash
flash source 입니다 (네비)
7
|
| 11267 |
Flash
드디어 cs3 이 출시 했다고 합니다.
3
|
| 11264 | |
| 11263 |
JavaScript
[스크립트] 이미지 없는 둥글게 테두리 DIV
|
| 29064 |
HTML
한글패치의 삭제 방법
3
|
| 11256 | |
| 11250 | |
| 11244 |
JavaScript
왜곡과 수평 바로잡기 (동영상)
5
|
| 11238 | |
| 11237 | |
| 11234 | |
| 29061 | |
| 11231 | |
| 11228 | |
| 11226 | |
| 29056 |
HTML
플래쉬 인트로자동으로 로딩되게
4
|
| 11223 | |
| 11216 |
MySQL
익스플로러7 팝업창의 주소창 없애기
6
|
| 11214 | |
| 24846 | |
| 11210 |
JavaScript
포토샵8.0cs 분할영역 도구로 일부 영역만 저장은 불가능 한가요?
3
|
| 11206 |
JavaScript
유용한 포샵단축키
3
|
| 11199 | |
| 11194 |
JavaScript
유용한 포토샵 강좌 사이트
4
|
| 11190 |
JavaScript
Jpeg등으로 압축하지 않고 Photoshop파일 사이즈 줄이기
3
|
| 29052 |
HTML
특정레이어만 선택해서 보기
3
|
| 11188 | |
| 11182 | |
| 11178 |
JavaScript
포토삽을 초기화 하고 싶을때
3
|
| 29048 | |
| 11171 |
Flash
플래쉬 네비게이션 질문입니다...
6
|
| 11163 | |
| 11159 |
기타
심볼마크와 로고
3
|
| 11154 | |
| 29047 |
HTML
파일에 이미지를 포함시키는 방법
|
| 29037 |
HTML
포토샵을 빨리 뜨게 하려면...
9
|
| 11149 |
JavaScript
포토샵에서 작업하다 글자 사이즈가 갑자기 커지거나 작아질 때.....
4
|
| 29036 |
HTML
PDF 세션에 대한 원리 및 보안
|
| 11135 |
JavaScript
고급스런 색상 만들기 혹은 선택하기...
13
|
| 29032 | |
| 11134 |
JavaScript
롤오버 자바스크립트입니다.
|
| 11129 |
JavaScript
포토샵 한영키 안먹을때..(다른 프로그램도 마찬가지..영구적용)
4
|
| 29031 | |
| 11127 | |
| 29026 |
HTML
이미지 저작권 관련 설명 7탄
4
|
| 11119 | |
| 11115 | |
| 29020 |
HTML
이미지 저작권 관련 설명 6탄
5
|
| 11113 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기