728x90
반응형
Javascript 로딩바 만들기
자바스크립트에서 로딩바 이미지 파일 없이
화면 로딩바를 구현하는 방법을 소개합니다.
728x90
A 버튼을 클릭하면 showLoader 함수가 호출되어 애니메이션 되는 로딩 이미지를 화면에 보여주고,
B 버튼을 클릭하면 hideLoader 함수가 호출되어 로딩 이미지를 숨깁니다.
로딩 이미지는 이미지 파일이 아닌 CSS를 사용하여 스타일링되었습니다.
로딩바 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Loading Example</title>
</head>
<body>
<button id="showLoader">A 버튼</button>
<button id="hideLoader">B 버튼</button>
<div id="loaderContainer" class="loader-container">
<div class="loader"></div>
</div>
<script src="script.js"></script>
</body>
</html>
로딩바 CSS
.loader-container {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1000;
}
.loader {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}// 노란 소제목
로딩바 JavaScript
document.getElementById('showLoader').addEventListener('click', function() {
showLoader();
});
document.getElementById('hideLoader').addEventListener('click', function() {
hideLoader();
});
function showLoader() {
var loaderContainer = document.getElementById('loaderContainer');
loaderContainer.style.display = 'block';
}
function hideLoader() {
var loaderContainer = document.getElementById('loaderContainer');
loaderContainer.style.display = 'none';
}
버튼 클릭 이벤트에 따라 자바스크립트 로딩바를 보여주고 숨기는 기능을 구현하였습니다.
728x90
반응형
'vita_Programing' 카테고리의 다른 글
| Javascript Date 객체 예제 (0) | 2024.05.17 |
|---|---|
| MSSQL에서 저장프로시저 수정이력 확인 (2) | 2024.05.09 |
| CSS padding 예제로 알아보기 (0) | 2023.11.10 |
| MS Sql server 구성관리자 실행하기 (1) | 2023.11.09 |
| CSS margin 예제와 활용 (0) | 2023.11.08 |
