Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- relatedTarget
- 이벤트 루프
- 함수형
- JavaScript
- 화살표 함수
- 자바스크립트
- 넘블
- 로드마크
- 번들러
- hoisting
- 마이크로태스크
- fetch 취소
- 호출 스택
- webpack
- debounce
- 로컬터널
- 호이스팅
- 이터러블
- pushstate
- AbortController
- Call stack
- 비동기 작업
- localtunnel
- Lexical environment
- 클론코딩
- 유사배열
- 실행 컨택스트
- 렉시컬 환경
- 매클로태스크
- 웹팩
Archives
- Today
- Total
목록애니메이션 (1)
내가 보려고 만든 개발 공부 일지
CSS - 애니메이션으로 로딩마크 만들기
화면에 컨텐츠를 보여주기 위해선 API를 호출하고 데이터를 가져와서 해당 UI에 적절히 렌더링 해줘야 한다. 이때 API 요청에 대한 응답이 올때까지 사용자에게 "요청중" 이라는 상태를 보여주는게 좋은 사용자 경험일 것이다. 이 상태를 로딩마크로 보여주는데 (원이 빙글빙글 돌아간다던가 아니면 텍스트가 움직인다던가) 가장 무난한 모양의 로딩마크를 css로 구현하는 법을 끄적거려본다. 위 스타일1, 2 의 차이점은 1은 그냥 일정하게 회전만 하는 모습이고, 2는 뭔가 테두리가 늘어났다 줄었다 하면서 좀더 역동적으로 회전하는 모습이다. 스타일-1 /* style.scss */ .loading { div { border: 9px solid orange; border-radius: 50%; border-color..
CSS
2022. 1. 13. 15:37