-
간단한 로딩 애니메이션프론트엔드/CSS 2022. 7. 15. 09:49728x90
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회원가입 페이지</title> <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="loading"> </div> <h3>Loading ...</h3> </body> </html>index.html 파일에 로딩 애니메이션을 보여주기 위한 div 요소를 추가한다.
.loading{ width: 200px; height: 200px; border: 15px dotted orange; border-radius: 50%; border-top: 15px dotted white; border-right: 17px dotted orange; border-bottom: 20px dotted orange; border-left: 30px dotted orange; /* loading 의 부모요소 중에서 position 이 static 이 아닌 */ /* 요소의 위치를 기준으로 loading 의 위치가 결정됨 */ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: spin 1500ms ease-out infinite; } h3{ margin: 0; letter-spacing: 2px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: orange; } @keyframes spin{ from{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg); } to{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(360deg); } }style.css 파일을 위와 같이 작성하자!
:root{ --primary-color: brown; } .loading{ width: 200px; height: 200px; border: 15px dotted var(--primary-color); border-radius: 50%; border-top: 15px dotted white; border-right: 17px dotted var(--primary-color); border-bottom: 20px dotted var(--primary-color); border-left: 25px dotted var(--primary-color); animation: spin 1500ms ease-in infinite; } h3{ margin: 0; letter-spacing: 2px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--primary-color); } .center{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } @keyframes spin{ from{ transform: translate(-50%, -50%) rotate(0deg); } to{ transform: translate(-50%, -50%) rotate(360deg); } }중복되는 코드를 조금더 다듬으면 위와 같다.
728x90'프론트엔드 > CSS' 카테고리의 다른 글
자바스크립트 없이 탭메뉴 만들기 (0) 2023.06.23 우주의 공전 궤도 그리기 (0) 2022.07.15 Flexbox 수업 - 요약 (0) 2022.07.06 flex 로 블로그 레이아웃 만들기 (0) 2021.11.04 flex 없이 탭 네비게이션 만들기 (0) 2021.11.04