코드공부방

CSS 로딩UI 만들기 #3. 좌우 이동을 반복하는 막대기(bar) 요즘 계속 로딩 UI만 만들고 있다. 재밌어서 그런건 아니고 뭔가 계속 포스팅을 하려다보니 콘텐츠를 짜내는 중(?) 인가보다. 앞서 만든 회전하는 원, 시간차를 두고 스케일 조절을 반복하는 원에 이어 세번째 로딩 UI 제작이다. CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle) CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle) 앞전에 CSS를 사용하여 회전하는 원 로딩 UI을 만든적이 있다. CSS 로딩UI 만들기 #1. 회전하는 원(Circle) CSS 로딩UI 만들기 #1. 회전하.. code-study.tistory.com CSS 로딩UI 만들기 #1. 회전하는 원..

CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle) 앞전에 CSS를 사용하여 회전하는 원 로딩 UI을 만든적이 있다. CSS 로딩UI 만들기 #1. 회전하는 원(Circle) CSS 로딩UI 만들기 #1. 회전하는 원(Circle) 웹사이트에 자주 사용되는 로딩 UI 중, 무한으로 회전하는 원(Circle)을 사용하는 경우가 있다. 이때 돌아가는 원을 GIF이미지로 만들어 사용하는 경우도 있는데 그 경.. code-study.tistory.com 이번에는 세개의 원을 나열해두고 각각 시간차를 두고 일정은 크기로 커졌다 작아졌다 하는 로딩 UI를 만들어보려고 한다. 이미지를 보지 않으면 설명이 어려우니 우선 결과물부터 보자. 먼저 화면 중앙에 레이어를 하나 띄어 그 박스 안..

CSS 로딩UI 만들기 #1. 회전하는 원(Circle) 웹사이트에 자주 사용되는 로딩 UI 중, 무한으로 회전하는 원(Circle)을 사용하는 경우가 있다. 이때 돌아가는 원을 GIF이미지로 만들어 사용하는 경우도 있는데 그 경우에 background 처리가 깔끔하게 되지 않는다. 이때는 웹에서 background가 투명처리된 png이미지를 다운받거나 디자이너로부터 이미지를 받아 CSS로 돌리는 방법도 있지만 따로 디자이너의 손을 빌리지 않고 직접 만들어 쓸 수 있도록 CSS로 몇가지 로딩UI를 만들어보려고 한다. 첫번째는 아주 심플한 원을 무한으로 회전시키는 UI이다. (물론 디자이너 손을 거쳐나온 이미지가 더 이쁘겠지만..) 위와 같이 레이어를 띄워 dim 처리된 배경 가운데에 로딩하는 원을 돌려볼..