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>