[태그:] Progress Bar

얼마전 AS3으로 짠 프로그래스 바를 CSS와 자바스크립트를 사용해서 비슷한 방법으로 만들 수 있네요. 물론 브라우저와 버전에 따라서 차이가 나긴 합니다. 일단 파이어폭스와 IE9, 맥용 사파리 에선 정상적으로 보이네요.
크롬이나 구버전의 IE 등에서는 border-radius와 overflow가 무시되거나 다르게 보여지는 경향이 있으므로, 이들 브라우저에서는 직사각형 형태로 만들어야 할겁니다.

우선 태그는 다음과 같이 2개의 DIV 태그를 사용해서 간단합니다.

CSS로 각각의 DIV에 스타일을 입히고,

.progressbar{
	border-radius:10px;
	position:relative;
	width:250px;
	height:20px;
	background-color: #EFEFEF;
	overflow:hidden;
    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5), 2px 2px 3px rgba(0,0,0,0.3);
}
.progress{
	border-radius:10px;
	position:absolute;
	left:-250px;
	width:250px;
	height:20px;
	background:url(/blog/wp-content/uploads/2012/11/test.gif) repeat-x 0px 0px;
    -webkit-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
    box-shadow: inset 5px 5px 8px rgba(255,255,255,1), inset 5px -5px 8px rgba(0,0,0,0.5);
}

마지막엔 자바스크립트를 사용해서 backgroundPosiiton을 제어하는 것으로 마무리.

var p = 0;
var pct = 0;
function loading(){
	var prg = document.getElementById("progress");
	if(prg){
		p++;
		if(p >= 20){p = 0;}
		prg.style.backgroundPosition = p + "px 0px";
		pct++;
		if(pct >= 0){pct = -250;}
		prg.style.left = pct + "px";
	}
}
setInterval(loading, 50);