Displaying percentages

Bare NakedApp에 재미난 글이 하나 올라왔습니다. Displaying percentages라는 글인데요. 일종의 Progress bar를 image 두개로 간단하게 만드는 방법입니다.

이미지는 위의 두 개의 이미지입니다. percetImage.png의 background로 percentImage_back.png를 설정합니다. 그리고 percentage가 변경됨에 따라서 percentImage_back.png의 위치를 조금씩 위로 옮기면 됩니다.
Displaying percentages에서는 percentImage.png의 style과 percentImage 태그를 다음과 같이 설정하였습니다.

background로 percentImage_back.png를 설정해줍니다.

그리고, img태그의 percentImage.png에 style을 percentImage로 설정함으로서 percentimage_back.png를 설정하여 progress처럼 보이게 해줍니다. 아주 간단한 효과만으로도 이미지의 진행상황을 보여주게 됩니다.

progressbar 보기

※ 위의 코드는 prototype.js의 PeriodicalExecuter를 사용하여 시간이 지남에 따라 updateProgress라는 메소드를 호출하여 background-position의 위치를 변경시키게 됩니다. (iframe을 삽입하는 경우 삭제해버리네요.)


출처 : Displaying percentages