오늘은 짧지만 강렬한(?) 모듈을 소개하고 갈까 합니다. spinner는 너무나 많이 쓰이고 있습니다.
이런 spinner 가 초기에 많이 쓰였다고 한다면
안드로이드, iOS, web 가릴 것 없이 빙글빙글 돌아가는 spinner는 사용자에게 기다리는 동안의 안정감을 선사하죠.
tawian/text-spinners
_text-spinners - Pure text, CSS only, font independent, inline loading indicators_github.com
지금 소개하는 spinner는 text spinner 입니다. 아주 간단한 codepen 부터 보고 가시죠?
사실.. 이 코드펜만 보면 더 설명할 것도 없습니다.
그저 가져다쓰기만 하면 프로젝트를 아주 훌륭하게 만들어주는 좋은 도구입니다.
어디에서 영감을 얻었을까?
하지만 프로젝트를 잘 보면 cli-spinner에 영감을 받았다고 합니다.
sindresorhus/cli-spinners
_cli-spinners - Spinners for use in the terminal_github.com
cli-spinner는 Node 기반의 커맨드라인에서 돌아가는 spinner 입니다.
아래를 클릭하시면 돌아가는 모습을 볼 수 있습니다.
Cli-spinner 소스 설명
소스는 의외로 간단합니다.
와 같이 interval time을 정해 두고 frame 별로 돌아가는 문자를 지정하면 애니메이션이 나타나는 방법을 취하고 있구요
setInterval(() =\> {
const frames = spinner.frames;
logUpdate(frames\[i = ++i % frames.length\] + ' Unicorns');
}, spinner.interval);
와 같이 setInterval을 호출하고 있습니다.
text-spinner 소스 분석
.loading::after {
content: "\\A.\\A..\\A...";
animation: spin4 2s steps(4) infinite;
}
cli-spinner가 javascript의 setInterval을 이용했다고 하면 text-spinner는 animation기능을 이용해서 같은 내용을 구현했네요.
정말 깜놀한 아이디어네요~
By Keen Dev on October 5, 2016.
Exported from Medium on May 31, 2017.
Alice in wonderland