테스트 사이트 - 개발 중인 베타 버전입니다
SIR

Progress 로딩바

개발자 기타
yong
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 18년 전 · 2924
<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에서 이동 됨]
목록
이전글 다음글

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.
글쓰기

알고있으면 유용한 무료 디자인소스 사이트

#디자이너
덕덕서리
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

서버시간 알아내기

#개발자 #javascript
PPlayPixel
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

css 템플릿 사이트

#디자이너
덕덕서리
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

모바일 ui 사이트 [1]

#디자이너
덕덕서리
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

swip 사용 안하고, touchstart, touchmove 사용하여 슬라이드 구현

#퍼블리셔 #기타
돼지코구뇽
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

숫자를 한글표기로 바꾸기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

Android,IOS 앱용 아이콘 템플릿 참고 사이트

#개발자 #mobile
인덱스웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

여러문장을 한번에 자동 줄바꿈 하기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

서버 동시접속자 설정 변경하기

#개발자 #웹서버
인덱스웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

디렉토리의 모든 파일을 읽어 목록으로 만들기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

PHP 버전이 낮아 imagerotate() 함수가 없을때 대신 사용하는 함수

#개발자 #php
뿌뿌하하
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

간단하게 자동으로 테이블 너비 조정하기 입니다. [1]

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

문자열자르기 (문자별 다른 너비 해결)

#개발자 #php
PPASKRAN
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

테이블 복사 쿼리

#개발자 #mysql
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

많이들 사용하시는 Slider 에 대해서... [2]

#퍼블리셔 #기타
kkiplayer
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

현재 접속중인 사용자 나타내기

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

mysql select 후 update 하기

#개발자 #mysql
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

다른 페이지로 이동하는 방법 3가지 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

한글문자열 자르는 법 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

mysql_query 전체 갯수 빨리 알아보기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

POST값 통째로 인코딩하기, 배열, iconv

#개발자 #php
서서로웹
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

이메일주소 검사하기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

php 확장자 내 맘대로 바꾸기 입니다.

#개발자 #웹서버
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

문자열을 한 문자씩 나누어 출력하기 입니다.

#개발자 #php
Angelos
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전

Node js 게시판 프로젝트 소개합니다.

#개발자 #node.js
ssnshero
프로필 보기이 회원 글보기이 회원의 댓글보기
• 9년 전