[HTML5] Progress Bar CSS입히기

<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

• http://www.hongkiat.com/blog/html5-progress-bar/
• http://www.useragentman.com/blog/2012/01/03/cross-browser-html5-progress-bars-in-depth/
• http://css-tricks.com/css3-progress-bars/ , 데모: http://css-tricks.com/examples/ProgressBars/
• http://www.matlus.com/html5-file-upload-with-progress/

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