[인터랙션] CSS를 이용한 로딩 애니메이션

이전에 블로그에서 Youri Kim님이 '재미있는 로딩 애니메이션' 포스트를 통해 로딩 애니메이션에 대한 설명과 사례를 소개해주셨죠. 이번 글에서는 웹디자인/개발을 할 때 바로 사용할 수 있는 로딩 애니메이션을 공유하려고 합니다.

아마 웹디자인을 주로 하시는 분들은 더 많이 아실 것 같은데요, 최근 CSSDeck이나 CodePen같은 곳들을 자주 들어가서 구경을 하고 있습니다. 거기에 올라오는 여러 인터랙션 예제들이 재미있거든요. 전문 분야가 아니라 확실히는 모르지만, HTML, CSS, JavaScript등을 사용하는 웹 환경이 성숙해지면서 예전에 Flash, Animation GIF로 처리했던 것들을 이제 CSS, JavaScript를 이용하여 구현하는 것 같습니다. 그러다보니 글자로 된 코드만 공유하면 누구든 간단히 코드를 수정하여 애니메이션을 변형시킬 수 있는 환경이 되었고요. CodePen사이트의 타이틀만 봐도 'Front End Developer Playground & Code Editor in the Browser' 입니다. 그 Playground에서 찾아본 로딩 애니메이션을 공유합니다. 다소 식상할 수도 있지만, 코딩을 통해 구현했고 소스를 응용해 직접 사용할 수 있다는 것이 끌리게 만들었습니다.

*각 사례 상단의 'HTML'과 'CSS/SCSS/Stylus'탭을 클릭하면 소스를 보실 수 있습니다.

See the Pen Loader #1 by Sam Lillicrap (@samueljweb) on CodePen.

출처 : http://codepen.io/samueljweb/pen/LbGxi

See the Pen Simple CSS Loading animation by Dom Sammut (@domsammut) on CodePen.

출처 : http://codepen.io/domsammut/pen/eJbly

See the Pen Simple CSS3 Animation Example by Rex Kirby (@rexkirby) on CodePen.

출처 : http://codepen.io/rexkirby/pen/ftJro

See the Pen Spinny Loader by Tim Holman (@tholman) on CodePen.

출처 : http://codepen.io/tholman/pen/mgsBy

See the Pen CSS Spinning/AJAX Wheel by Jabran Rafique (@jabranr) on CodePen.

출처 : http://codepen.io/jabranr/pen/GLFjv

See the Pen Loaders (WIP) by Tania LD (@TaniaLD) on CodePen.

출처 : http://codepen.io/Zeneraith/pen/bdEmA

See the Pen Such Spinners, Much Loading by Hsu-Cherng (@Zeneraith) on CodePen.

출처 : http://codepen.io/Zeneraith/pen/bdEmA

See the Pen Tiny Single Element Loading Animations by J Howell (@lixquid) on CodePen.

출처 : http://codepen.io/lixquid/pen/ybjmr

See the Pen Twinner Spinner by Katy DeCorah (@katydecorah) on CodePen.

출처 : http://codepen.io/katydecorah/pen/tbjqx

See the Pen Super Simple CSS Spinner by Thomas Mandelid (@mandelid) on CodePen.

출처 : http://codepen.io/mandelid/pen/vwKoe

See the Pen Loading icon 4 by oboro (@obomemo) on CodePen.

출처 : http://codepen.io/obomemo/pen/vtpAl

출처 : http://tobiasahlin.com/spinkit/




마지막으로, 이 사례는 어떠신가요? 애니메이션이 잘 보이지 않을 수 있으니, 출처에 링크된 페이지를 열어서 보시는 것이 좋습니다.

See the Pen SVG animation by Olaf (@olliex) on CodePen.

출처 : http://codepen.io/olliex/pen/moyjI


[참고##영감 동영상##]