[HTML & CSS] 버튼클릭으로 로딩바(Loding Bar) 만들기!

Coding/HTML & CSS

[HTML & CSS] 버튼클릭으로 로딩바(Loding Bar) 만들기!

포스트it 2022. 4. 11. 09:53

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>

결과값

로딩중입니다..