영욱닷컴(http://youngwook.com) :: 7.4 HTML5 Semantic <progress>

7.4 HTML5 Semantic <progress>

HTML5 2011/09/26 16:00 Posted by winkey

진행률을 나타낼 때 사용하는 것이 Progress bar입니다. 주로 파일 복사등에서 흔히 볼 수 있지만 웹 상에서 특정 작업의 진행율을 보여주거나 업무 진척등을 일목요연하게 보여주는 용도로도 흔히 사용할 수 있습니다. 위와 같이 Progress를 활용하고자 할 때에는

Progress of Task A : <progress value="60" max="100">60%</progress>

와 같이 표현하면 60%의 진행률을 보여줄 수 있습니다.
아직까지 Progress는 Chrome 8 버전 이상 혹은 Opera 11 이상만 지원되고 있습니다.

Browsers	Progress element support
IE 9 Beta
Firefox 4
Safari 5
Chrome 8	✓
Opera 11	✓

실시간으로 특정 그래프를 조정하고 싶다면 역시 방법은 Java Script를 사용하는 방법이 있습니다. Java Script에서 진행율을 표현하고 싶으면

<section>
<p>Progress: <progress id="p" max=100><span>0</span>%</progress></p>

<script>
var progressBar = document.getElementById('p');

function updateProgress(newValue) {
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>
</section>

과 같이 활용할 수 있습니다.