용량 최적화 썸네일형 리스트형 css animation steps로 Spinner 구현하기 프로젝트: loplat ui 키워드: css animation steps, sprite image, 용량 최적화 상황 로딩 상태일 때 화면에 표시할 Loading UI Component가 필요하다. loplat ui library에서 재사용 가능한 컴포넌트를 직접 구현하고자한다. 로딩 애니메이션을 위해 gif를 사용할 경우 용량과 성능 문제가 발생한다. sprite image와 css animation의 steps 속성을 이용하여 애니메이션 효과를 구현할 수 있다. 해결과정 먼저 디자이너로부터 30장 이상으로 이루어진 sprite image를 받고 img 태그의 src에 넣었다. React Component의 prop으로 duration(애니메이션 재생 시간), scale(컴포넌트 크기 조절), zInd.. 더보기 이전 1 다음
