라이브러리
loading
html
<!-- 숨길때는 active 클래스 remove -->
<section class="loading-wrap active">
<div class="loading-box">
<div class="loading-item">
<div class="loading-circle"></div>
</div>
</div>
</section>
css
.loading-wrap {
display: none;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(255, 255, 255, 0.9);
z-index: 9998;
}
.loading-wrap.active {
display: flex;
display: -webkit-flex;
}
.loading-box {
width: 100%;
}
.loading-item {
display: block;
width: 44px;
height: 44px;
background:#000;
border-radius: 100%;
-webkit-border-radius: 100%;
margin: 0 auto;
position: relative;
}
.loading-circle {
display: block;
width: 30px;
height: 30px;
border: 4px solid #fff;
border-radius: 50%;
-webkit-border-radius: 50%;
border-top-color: #000;
position: absolute;
left:50%;
top:50%;
margin:-15px 0 0 -15px;
animation: spin 2s ease-in-out infinite;
-webkit-animation: spin 2s ease-in-out infinite;
}
@keyframes spin {
to {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
to {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}