[제이쿼리] 로딩 애니메이션 추가하기
제이쿼리로 로딩 애니메이션을 추가하는 방법에 대해 설명드리겠습니다. 이 과정에서는 HTML, CSS, 그리고 JavaScript(jQuery)를 사용하여 로딩 애니메이션을 구현합니다. 코드를 분리하여 유지보수가 용이하도록 하는 것이 목표입니다.
1. HTML 파일
HTML 파일은 기본적인 문서 구조와 함께 외부 CSS와 JavaScript 파일을 포함합니다. 로딩 애니메이션을 표시할 요소와 메인 콘텐츠를 위한 요소도 포함됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="loading">
<img src="loading.gif" alt="Loading...">
</div>
<div id="content">
<!-- Your main content here -->
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>HTML 코드를 간단히 설명하자면,
<div id="loading">: 로딩 애니메이션을 표시할 요소를 정의합니다.
<img src="loading.gif" alt="Loading...">: 로딩 이미지를 표시합니다.
그리고 jQuery 라이브러리를 포함하는 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>와 외부 JavaScript 파일을 링크하는 <script src="scripts.js"></script>를 하단에 반드시 추가합니다.
2. CSS 파일
CSS 파일은 로딩 애니메이션의 스타일과 기본적인 레이아웃을 정의합니다.
#loading {
display: none;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
#content {
display: none; /* Initially hide the content */
}설명:
#loading: 로딩 애니메이션 요소의 스타일을 정의합니다.
- display: none;: 초기에는 로딩 애니메이션을 숨깁니다.
- position: fixed;: 요소를 뷰포트에 고정하여 스크롤해도 같은 위치에 있도록 합니다.
- left: 50%; top: 50%; transform: translate(-50%, -50%);: 요소를 화면 중앙에 위치시킵니다.
- z-index: 1000;: 요소가 다른 콘텐츠 위에 표시되도록 설정합니다.
#content: 메인 콘텐츠 요소의 스타일을 정의합니다.
- display: none;: 초기에는 메인 콘텐츠를 숨깁니다.
3. JavaScript 파일
JavaScript 파일은 jQuery를 사용하여 로딩 애니메이션을 제어합니다.
$(document).ready(function(){
$('#loading').show();
// Simulate a network request or long running process
setTimeout(function(){
$('#loading').hide();
$('#content').show();
}, 3000); // 3 seconds delay
});- $(document).ready(function(){ ... });: 문서가 준비되었을 때 실행할 코드를 정의합니다.
- $('#loading').show();: 로딩 애니메이션을 표시합니다.
- setTimeout(function(){ ... }, 3000);: 3초 후에 실행할 코드를 정의합니다.
- $('#loading').hide();: 로딩 애니메이션을 숨깁니다.
- $('#content').show();: 메인 콘텐츠를 표시합니다.
이렇게 하면 로딩 애니메이션을 사용하여 사용자가 콘텐츠가 준비될 때까지 기다리게 할 수 있습니다. 코드를 분리하여 HTML, CSS, JavaScript 파일로 나누면 유지보수가 쉬워지고, 각 파일이 특정 역할을 명확하게 담당하게 됩니다.