로딩바3 CSS 막대 로딩바 (크기가 변하는 막대 로딩바 만들기) 안녕하세요~ 오늘은 앞에서부터 막대의 크기가 점차적으로 변하는 로딩바 애니메이션을 만들어 보려고 합니다. 약간의 시간차를 두고 막대의 높이가 차례로 변하는 애니메이션인데요! 결과 화면부터 확인해 보겠습니다. 위와 같은 로딩바입니다~ 결과화면으로 보면 어떤 효과인지 바로 알 수 있는데, 막상 문장으로 표현하려니 어떤 로딩바인지 한단어로 정의하기가 쉽지 않네요... 아무튼 위와 같은 로딩바를 만들어 보겠습니다. 우선 막대가 위치할 영역과 막대를 구성할 요소부터 만들어 보겠습니다. 1. 영역과 막대 요소 만들기 전체 영역인 container를 relative 포지션으로 가로, 세로 200px로 화면 가운데 위치해 주고, 안에 막대바가 들어갈 area영역을 absolute 포지션으로 가운데 자리 잡아 주었습니다.. 2023. 1. 12. CSS 원형 로딩 스피너 (css circle loading spinners) 안녕하세요~ 오늘은 로딩화면에서 빙글 빙글 돌아가는 로딩 스피너를 만들어 보려 합니다! css를 활용하여 style을 주고, 애니메이션을 사용하여 가장 기본적인 스피너를 만들어 볼 계획입니다. 결과 화면을 먼저 확인해 볼까요? 위와 같이 원형 스피너 일부가 색상을 가지고 돌아가는 모양의 스피너 입니다. 그럼 요소부터 말들어 보겠습니다. 1. 사각형 요소 만들고 윗부분 색상 주기 위와 같이 container 영역 내부에 spinner 영역을 사각형으로 만들어 주고 크기와 색상을 지정해 줍니다. 여기서 사각형 테두리의 경우 전체 border 값은 rgba(255, 255, 255, 0.3) 값을 사용해 0.3만큼 투명하게 만들어주고 border-top-color 값만 white로 주어, 윗부분의 테두리 색상.. 2022. 12. 22. CSS 도트 확대 로딩바 (css dot loading bar) 안녕하세요~ 오늘은 원형 도트가 서서히 확대되는 애니메이션의 로딩바를 만들어 보려고 합니다! 결화 화면 부터 먼저 확인해 보겠습니다. 위와 같은 원형의 도트가 차례로 하나씩 확대대는 로딩바입니다. keyframes, transform 속성을 이용해 원형 애니메이션을 만들고, 시간차를 주어 효과를 적용해 보려 합니다. 우선 요소를 만들고 자리잡아 주겠습니다. 1. 내부 요소 만들기 [html] 위와 같이 전체 초록색 배경의 영역인 container와 내부 도트가 위치할 영역인 area를 만들어 주고, 내부에 dot1, dot2, dot3 3개의 도트 요소를 만들어 줍니다. 도트 요소의 경우 border-radius 속성을 100%로 주어 원형으로 만들어 주었습니다. .area 영역의 margin의 경우 전.. 2022. 12. 20. 이전 1 다음