728x90
반응형
[HTML & CSS] 버튼클릭으로 로딩바(Loding Bar) 만들기!
스크립트에 Jquery를 꼭 추가해주셔야 합니다 !!
<!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>Loding bar</title>
</head>
<style>
/* page-loading */
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.6;
background: #e4e4e4;
z-index: 99;
text-align: center;
}
#loading > img {
position: absolute;
top: 36%;
left: 45%;
z-index: 100;
}
#loading > p {
position: absolute;
top: 54%;
left: 48%;
z-index: 101;
}
</style>
<body>
<button type="submit" id="lodingBtn">로딩바</button>
<div id="loading" style="margin-left: 0px;">
<img src="https://www.railtrip.co.kr/image/loading2.gif">
<p>로딩중입니다..</p>
</div>
</body>
</html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$('#loading').hide();
$('#lodingBtn').click(function(){
$('#loading').show();
return true;
});
});
</script>결과값
로딩중입니다..
728x90
반응형
'Coding > HTML & CSS' 카테고리의 다른 글
| [HTML & CSS] 사진 슬라이드 쇼 만들기 (이미지 움직이기) (0) | 2022.05.27 |
|---|---|
| [HTML & CSS] input(text 박스)태그에 정규식을 사용하여 한글 입력 방지 하는법 !! (2) | 2022.05.25 |
| [HTML & CSS] <button> 버튼 onclick 이벤트로 링크 이동 및 넣는법 - 초간단 !! (0) | 2022.04.08 |
| [HTML & CSS] 입력한 상태 그대로 보여 주는법, <pre> 태그 사용법 !! (0) | 2022.02.09 |
| [HTML & CSS] select option태그에 placeholder(플레이스 홀더) 기능 처럼 꾸미기 && 효과내기 (0) | 2022.02.03 |
댓글