얼마전 AS3으로 짠 프로그래스 바를 CSS와 자바스크립트를 사용해서 비슷한 방법으로 만들 수 있네요. 물론 브라우저와 버전에 따라서 차이가 나긴 합니다. 일단 파이어폭스와 IE9, 맥용 사파리 에선 정상적으로 보이네요.
크롬이나 구버전의 IE 등에서는 border-radius
와 overflow
가 무시되거나 다르게 보여지는 경향이 있으므로, 이들 브라우저에서는 직사각형 형태로 만들어야 할겁니다.
우선 태그는 다음과 같이 2개의 DIV
태그를 사용해서 간단합니다.
<div class="progressbar shadow"><div class="progress embossed" id="progress"></div></div> |
CSS로 각각의 DIV에 스타일을 입히고,
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .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
을 제어하는 것으로 마무리.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | 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); |