CSS Circular Percentage Bar

2016.11.25 by joontop

뭐라고 불러야하나..
CSS Circular Percentage Bar? / CSS Percentage Circle? / CSS radial progress bar? / Progress Circle? / 파일 다운로드 및 로딩 진행상태 (0 ~ 100%) 표시에 사용되는 UI 다.

loading...

아무튼 이런 무한 롤링은 아니다.
.
.
.

50%

이런거다.
.
.
.

상단 링크로 들어가보면 많은 방법이 나오지만 클래스를 0부터 100까지 지정하거나, canvas 를 활용하거나.. CSS/JS도 최소한으로 사용하고 싶었고 썩 맘에드는 놈을 찾지못했다.

<span class="percentage_bar">
    <span class="bar" style="width:%">%</span>
</span>
100%0%100%

그냥 박스스타일 이라면 width 수치만 바꿔줘도 쉽게 구현가능하다. 하지만 원이라니..
.
.
.

그래도 포기하기 않고 비슷하게 구현한 UI가 있어서 공유한다.

50%

오른쪽 반이 동작하는 원리다. 0deg 에서 180deg 까지 rotate 를 시키지만 50%에 왔을떄 90deg 가 나오며 90deg 부터 180deg 까진 색이 계속 채워져 있어야 한다. 설명 어렵다..

50%

왼쪽 반이 동작하는 원리다. .0deg 에서 180deg 까지 rotate 를 시키지만 50% 인 90deg 에 왔을떄부터 색이 채워져야 한다. 이렇게 구현한 이유는 오른쪽과 왼쪽을 동시에 0deg에서 180deg 까지 rotate 시켜야하기 때문이다.

50%

understand?..
.
.
.
자 이제 영역들을 overflow:hidden 시켜보겠다. (2배줌으로..)

50%

???
.
.
.
설명은 여기까지... 원의 사이즈에 따른 수치 조절들은 알아서...

<span class="donut">
    <span class="left" style="">
        <span class="box"></span>
    </span>
    <span class="right" style="">
        <span class="box"></span>
    </span>
    <span class="txt">50%</span>
</span>
50%

sample code
.
.
.
끝. 도움이 되었길...
nothing is impossible