도트1 CSS 도트 확대 로딩바 (css dot loading bar) 안녕하세요~ 오늘은 원형 도트가 서서히 확대되는 애니메이션의 로딩바를 만들어 보려고 합니다! 결화 화면 부터 먼저 확인해 보겠습니다. 위와 같은 원형의 도트가 차례로 하나씩 확대대는 로딩바입니다. keyframes, transform 속성을 이용해 원형 애니메이션을 만들고, 시간차를 주어 효과를 적용해 보려 합니다. 우선 요소를 만들고 자리잡아 주겠습니다. 1. 내부 요소 만들기 [html] 위와 같이 전체 초록색 배경의 영역인 container와 내부 도트가 위치할 영역인 area를 만들어 주고, 내부에 dot1, dot2, dot3 3개의 도트 요소를 만들어 줍니다. 도트 요소의 경우 border-radius 속성을 100%로 주어 원형으로 만들어 주었습니다. .area 영역의 margin의 경우 전.. 2022. 12. 20. 이전 1 다음