Css progress bar 만들기

css를 이용하여 간단한 progress bar를 만들어 보았다.

이전에 class101 clone을 할때 구현하지 못했었는데 이렇게 쉽게 구현할 수 있는걸 보니 어이가 없을 정도다.

css만 가지고 있으면 할 수 있다.

 

 

 

이왕 animation을 이용할거 rotate도 주어 box의 흔들림또한 같이 표현하였다.

시간을 표시해주는 부분은 미세한 ms의 차이로 인해 완벽히 들어맞지는 않는다. 

하지만 closure와 setInterval을 이용하여 구현하였다.

 

box 내부의 차오름과 비어짐은 가상요소인 ::after를 이용하였다.

가상 요소인 before와 after는 쓰임새가 참 많아서 좋다

 

keyframe으로 animation의 이름을 지정하고 

그 안에 %가 증가할때마다의 action을 정의해 주었다.

 

css의 animation과 transform은 dom을 새로 그리지 않고 gpu 가속을 이용하기 때문에 항목의 이동이나 변화를 표현할 때 자주 사용한다.

animation 속성을 이용할때는

animation: animation-name animation-time animation-timingfunction animation-repeat을 주로 이용한다.

예를 들면 animation: shaking 6s linear infinite 와 같이 사용한다.

따로 지정할 수도 있고 축약형으로 위와 같이 사용할 수 도 있다.

 

 

 

See the Pen Untitled by 정우병 (@woobottle) on CodePen.