블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 올라온 글

최근에 달린 댓글

'Progress Bar'에 해당되는 글 3건

  1. 2013.03.04 [HTML5] Progress Bar CSS입히기 2
  2. 2008.02.21 Extjs 그리드안에서 프로세스바 구현하기 3
  3. 2008.02.21 Extjs 프로세스바 구현하기





<progress> 요소는 HTML5 에 새로이 추가된 시맨틱 태그입니다.

각 브라우저별로 별도로 디스플레이되는 관계로 디자인 하기가 까다로운것이 사실입니다.

이번에는 이러한 Progress 요소에 CSS를 입히는 방법에 대해서 알아보도록 하겠습니다.


그전에 디자이너라면 알아두어야할 Progress Bar 디자인 35 를 먼저 읽어 보시길 권합니다.



간단한 방법

원본: http://www.hongkiat.com/blog/html5-progress-bar/



마크업

Progress 요소는 다음과 같이 마크업을 작성합니다.


<progress value="10" max="100">

     <strong>Progress : 10% </strong>

</progress>  


일반적으로 위와같이 작성하였을 경우 윈도우와 OS X에서 보이는 화면은 다음과 같이 브라우저 디폴트로 저장됩니다.

굵게 표현된 부분은 Progress Bar의 fall back (대체) 요소로 사용합니다. Progress bar를 지원하지 않는 브라우저를 위한 것인것은 대부분들 다 아시죠?





스타일시트 작성


progress {  

    background-color: #f3f3f3;  

    border: 0;  

    height: 18px;  

    border-radius: 9px;  

}  


그러나 위와 같이 작성하여도 아래와 같이 각 브라우저별로 다르게 화면에 출력됩니다.





파이어폭스에서는 Progress Bar에 스타일은 적용되나 애니메이션이나 Progress Bar의 Value에는 스타일이 적용되지 않으며, 크롬브라우저와 사파리 브라우저는 브라우저의 기본 스타일 및 OS플랫폼의 스타일이 제거되고 Webkit Style이 적용됩니다.


웹킷계열의 브라우저에서는 위의 마크업이 다음과 같이 본연의 요소와 값 요소로 해석됩니다.

<progress>  

    ┗ <div> ::-webkit-progress-bar  

         ┗ <div>::-webkit-progress-value  



따라서 스타일시트도 다음과 같이  Progress 본연의 스타일과 Value값을 별도로 작성해 주셔야 합니다.


progress::-webkit-progress-bar {  

    /* style rules */  

}  

progress::-webkit-progress-value {  

    /* style rules */  



파이어폭스의 경우에는 웹킷계열과 같게 Vendor-prefix 및 가상선택자를 사용하지만 아래와 같이 하나만 쓰는것이 다릅니다.


progress::-moz-progress-bar {  

    /* style rules */  

}   



결론적으로 Progress Bar의 스타일시트를 바꾸시려면 다음과 같이 작성합니다.


progress {  

    /* style rules */  

}  

progress::-webkit-progress-bar {  

    /* style rules */  

}  

progress::-webkit-progress-value {  

    /* style rules */  

}  

progress::-moz-progress-bar {  

    /* style rules */  

}  




애니메이션 처리


애니메이션 처리의 경우 Progress bar의 min 값과 max값을 계산하여 자바스립트로 구현합니다.

jQuery라이브러리를 이용하여 구현할 경우 다음과 같이 마크업을 작성합니다.

0에서 시작하여 max=100 까지 애니메이션을 구현합니다.


<progress id="progressbar" value="0" max="100"></progress>  


스크립트는 setInterval을 이용하여 부드러운 효과를 주기위해 (1000 / max) * 5 ms 마다 구현하도록 합니다.


$(document).ready(function() {  

    var progressbar = $('#progressbar'),  

        max = progressbar.attr('max'),  

        time = (1000/max)*5,      

        value = progressbar.val();  

  

    var loading = function() {  

        value += 1;  

        addValue = progressbar.val(value);  

          

        $('.progress-value').html(value + '%');  

  

        if (value == max) {  

            clearInterval(animate);                      

        }  

    };  

  

    var animate = setInterval(function() {  

        loading();  

    }, time);  

}; 



최종소스 다운로드

source.zip





Progress bar 지원브라우저 현황


 CanIUse.com, 에 따르면 HTML5 progress 요소는 아래 브라우저에서 지원합니다: Firefox 16+, Chrome 8+, Safari 6+ and Opera 11+.









고급 CSS 먹이기

출처: http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/




소스다운로드:

progressbar.zip






Reference Site






HTML5의 FileAPI 과 Drag and Drop, XMLHttpRequest 2 를 이용한 파일업로드, 다운로드시 유용하게 사용하시길 바랍니다. ^^*





'Publisher > HTML/HTML5' 카테고리의 다른 글

SVG와 CANVAS사이의 선택  (16) 2010.03.09
HTML5 Gallery  (4) 2009.04.10
웹페이지 소스보기 금지  (0) 2008.08.19
Post by 넥스트리소프트 데꾸벅(techbug)
, |
Extjs를 사용하다가 각 그리드 row에 각각의 프로세스바를 구현하게 되었다.
각 grid의 node 마다 프로세스 클래스를 재선언하였더니 너무 페이지자체가 무거워져
taskMgr를 이용하여 CSS로 구현하기로 하였다.
아래 소스는 넥스트리 사내프로젝트에서 구현되었던 일부소스이다.


[Extjs 소스중 일부] 기밀이므로 요기 까지만... ^^
// 타스크매니저로 autorefresh한다.
this.showTask = Ext.TaskMgr.start({
    run: this.store.reload,
    scope: this.store,
    interval:1000,
    args:[{params:{'appId':appId, 'deployId':deployId}, add:false}]
});

// 배포상태를 가져오는것을 멈춘다.
 Ext.TaskMgr.stop(this.showTask);



// 데이타가 모두 로드되었을 경우 해당 데이타값을 비교하여 계속
// autoRefresh할것인가를 결정한다.
this.store.on('load',function(store,records,opts){
    this.loadCompleteStatus(store,records,opts);
},this);



/**
 * 데이타가 모두 로드되었을 경우 해당 데이타값을 비교하여 계속 autoRefresh할것인가를 결정한다.
 * this.store.on('load',fn) 에 해당하는 메쏘드 실제 그리드안의
 * record에 해당하는 내용들을 모두 update한다.
 */
loadCompleteStatus : function(store,records,opts){
    var totalSize = store.getCount();
    var totalStop = 0;


    for(var i=0; i < totalSize; i++){
        var record = store.getAt(i);
        var pid = '_PROGRESSING_'+record.data.instsId;
        var lastMessage = (record.data.lastMessage) ? record.data.lastMessage : '';
        var progressRate= (record.data.progressRate)? parseInt(record.data.progressRate) : 0;
        var curStop = (record.data.isStop) ? parseInt(record.data.isStop) : 0 ;
       
        totalStop = totalStop + curStop;
        // 성공+실패 횟수가 전체 갯수와 같을 경우 autorefresh를 멈춘다.
        if(totalStop == totalSize) this.stopDeployStatus();


    }// for end
}

/**
 * 각 인스턴스마다의 정보(인스턴스명, 인스턴스Id, IP,port)를 그리드Row에 모두 표현한다.
 */
rendererDeployStatus : function(value, metadata, record,rowIndex,colIndex,store) {
return String.format(
        '<div class="_DEPLOYSTATUS_ROW_"><b>{0}</b><span class="_INSTANCE_IP_">{1}</span>'
        +'<div class="_PROGRESSBAR_CLASS_">'
        +'<div class="_PROGRESSBAR_" style="background-position-x:{2}%">{2}% : {3}</div>'
        +'<div id="_PROGRESSING_{4}" class="_PROGRESSBAR_COM_" '
        +'style="top:0;width:{2}%">{2}% : {3}</div></div></div>',
        value
        ,'http://'+record.data.ip +':'+record.data.port
        , record.data.progressRate
        , record.data.lastMessage
        , record.data.instanceId
        );
},


스타일시트
/* Progress bar 만들기 시작*/
DIV._DEPLOYSTATUS_ROW_ { padding-left:20px; }
DIV._DEPLOYSTATUS_ROW_ B {
    display:block;
    color:#333;
}
DIV._DEPLOYSTATUS_ROW_ SPAN._INSTANCE_IP_ { color:#333; }
._PROGRESSBAR_CLASS_LEFT_ {text-align:left !important}
DIV._PROGRESSBAR_CLASS_ {
    text-align:left !important;
    vertical-align:middle !important;
    padding:0 !important;
    height:18px !important;
    overflow:hidden !important;
    margin:7px 20px 10px 0 !important;
    background : transparent url(../img/progressbgwhite.png) 0 0 repeat-x !important;
    border:#6593CF solid 1px !important;
    position:relative;
}

DIV._PROGRESSBAR_ {
    text-align:left !important;
    vertical-align:middle !important;
    padding:0 3px 0 10px !important;
    margin:0 !important;
    height:18px !important;
    line-height:18px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    font-family:'segoe ui',verdana,arial;
    color:#396095;
    background-image : url(../img/progressbgwhite.png) !important;
    background-repeat : no-repeat ;
    background-position-y : 0;
    border:0 !important;
}

DIV._PROGRESSBAR_COM_ {
    text-align:left !important;
    vertical-align:middle !important;
    padding:0 3px 0 10px !important;
    margin:0 !important;
    height:18px !important;
    line-height:18px !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    font-family:'segoe ui',verdana,arial;
    color:white;
    background: url(../img/progressbarbg.png) 0 0 repeat-x !important;
    border:0 !important;
    position:absolute;left:0;
    z-index:10;
}




.failrow DIV._PROGRESSBAR_COM_ {
    background-image: url(../img/progressbarfail.png) !important;
    background-color:#EFF39B !important;
}

/*프로그레스바 만들기 끝 */








Post by 넥스트리소프트 데꾸벅(techbug)
, |
아래와 같은 상태진행(progress)바를 생성할때 사용합니다.

사용자 삽입 이미지














Ext.onReady(function() {

    var percent;
    var textfield;

    var testPanel = new Ext.Panel( {
        title : 'progressbar test',
        collapsible : true,
        renderTo : document.body,
        width : 600,
        height : 200,
        bodyStyle : 'padding:10px',
        html : '<div id="_progress_"></div>',
        tbar : [
                percent = new Ext.form.NumberField( {
                    id : '_1_',
                    maxValue : 100,
                    minValue : 0,
                    width : 50,
                    value : '20'
                }),
                textfield = new Ext.form.TextField( {
                    id : '_2_',
                    width : 400,
                    value : '다운로드: - Application already exists at path /bcf'
                }),
                '-',
                {
                    text : '변경',
                    handler : function() {
                        // 상태바의 값을 입력한 값으로 계산하여 뿌려준다.
                        pbar.updateProgress(parseInt(percent.getValue()) / 100,
                                percent.getValue() + '% - '
                                        + textfield.getValue());
                    }
                }]
    });
    // 실제 프로그래스바를 생성하는 컴포넌트
        var pbar = new Ext.ProgressBar( {
            text : 'Initializing...',
            autoWidth : false,
            width : '100%',
            cls : 'left-align',
            renderTo : '_progress_'
        });
    });
}

<body><div id="techbugbar" ></div>

Post by 넥스트리소프트 데꾸벅(techbug)
, |