<style>
/*Loader*/
.dimdiv {z-index:1100 !important; position:fixed; background-color:rgba(0,0,0,0.6); width:100%; height:100%; top:0; left:0;}
.loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1000 !important;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 8px solid #f3f3f3;
border-radius: 50%;
border-top: 8px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script>
window.onload = function() {
$('.dimdiv').hide();
};
</script>
<div class="dimdiv">
<div class="loader"></div>
</div>
'[ Web 관련 ] > HTML, CSS' 카테고리의 다른 글
셀렉트 박스 화살표 (0) | 2021.12.15 |
---|---|
404.html 에러 샘플 파일 (0) | 2021.10.27 |
checkbox readonly 적용 안됨 (0) | 2021.07.13 |
숫자+소수점 만 입력 가능한 폼 (0) | 2021.06.02 |
html 웹 페이지 캐싱 하지 않기 (0) | 2021.04.16 |