css
.macaronics-loader { margin: 5% auto; height: 150px; width: 150px; position: relative; display: none; } .circle { height: 100%; width: 100%; border: 6px solid #fff; border-right-color: #c30; border-top-color: #c30; border-radius: 50%; animation: spin 800ms infinite linear; position: absolute; top: 0; left: 0; } .logo-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .macaronics-loader img { width: 70px; /* 로고 이미지의 크기를 조절합니다. */ height: 70px; /* 로고 이미지의 크기를 조절합니다. */ pointer-events: none; /* 로고 이미지에 마우스 이벤트를 비활성화합니다. */ left:10px; position:relative; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(359deg); } }
html
<div class="macaronics-loader" > <div class="circle"></div> <div class="logo-container"> <img src="https://cdn.jsdelivr.net/gh/braverokmc79/macaronics.net@v1.0.0/images/smMacaronics.png" /> </div> </div>
댓글 ( 0)
댓글 남기기