Semantic-UI로 무한 로딩 바 만들기

개발

joonas 2020. 1. 15. 00:42

2018년 말에, Semantic-UI 에서 제공하는 progress bar를 살짝 바꾸어서 CSS의 overflow: hidden 속성으로 무한 로딩을 구현한 적이 있다.

위 링크에서도 동작하는 모습을 볼 수 있다.

기존의 progess bar의 인터페이스는 그대로 유지하고 기능만 추가하였기에, 코드도 나름 깔끔한 편이다.
문제는 기존에 제공되는 placement text는 안된다. 당시에 이걸 유지해보려고 많은 삽질을 해봤다가 실패했다.

사실 이 기능은 Semantic-UI에 PR을 날렸으나 무산되었다.
[Progress] Add properties for infinite loop as loader style #6691(https://github.com/Semantic-Org/Semantic-UI/pull/6691)

PR을 날리고 6개월이 지나서 댓글이 달렸는 데, Semantic-UI의 community fork인 Fomantic-UI에서 CSS만으로 구현했다고 한다.

Fomantic-UI를 쓰는 게 가장 확실하겠지만ㅋㅋ 기존 Semantic-UI만으로 해결하고 싶다면, 위의 Pull Request 링크에서 코드 변경 사항만 추적하면 알 수 있다.

사실 이 기능은, 개발하던 번역기 확장 프로그램의 UI를 업데이트하면서 개발했다.

로딩 원이 돌아가는 gif가 상당히 구식으로 보였기때문에, 깔끔한 디자인을 원했다. 그리고 그 결과는.

v1.2.4 업데이트에 추가된 모습이다.
프로모션 동영상이나 PPT 등 업데이트 된 UI가 기록으로 남은 곳이 없어서, 생각난 김에 블로그로 적어본다.