1.첫번째 예

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>

=======================================================================

2.두번째  예

CSS

.loading-dim-layer .loading-pop-layer .loading-pop-container {
	padding: 20px 25px;
	text-align: center;
}

.loading-dim-layer .loading-pop-layer p.loading-ctxt {
	color: #666;
	line-height: 25px;
}

.loading-dim-layer .loading-pop-layer .loading-btn-r {
	width: 100%;
	margin: 10px 0 20px;
	padding-top: 10px;
	border-top: 1px solid #DDD;
	text-align: right;
}

.loading-dim-layer .loading-pop-layer {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 410px;
	height: auto;
	z-index: 10;
	z-index: 10;
}

.loading-dim-layer {
	display: none; position : fixed;
	_position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	position: fixed;
}

.loading-dim-layer .loading-klover-dimBg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: .5;
	filter: alpha(opacity = 50);
	filter: alpha(opacity = 50);
}

.loading-dim-layer .loading-pop-layer {
	display: block;
}

.loading-dim-layer a.loading-btn-layerClose {
	display: inline-block;
	height: 25px;
	padding: 0 14px 0;
	border: 1px solid #faaa40;
	background-color: #faaa40;
	font-size: 13px;
	color: #fff;
	line-height: 25px;
}

.loading-dim-layer a.loading-btn-layerClose:hover {
	border: 1px solid #091940;
	background-color: #1f326a;
	color: #fff;
}

.loading-dim-layer .loading span {
	display: inline-block; /* span 내부요소들을 한줄로 세우기 */
	width: 50px;
	height: 50px;
	background-color: gray;
	border-radius: 50%; /* span을 동그랗게 */
	animation: loading 1s 0s linear infinite;
	/* 이벤트명  반복시간  딜레이시간  이벤트처리부드럽게  이벤트무한반복*/
	margin: 0 10px;
}

.loading-dim-layer .loading span:nth-child(1) {
	/*loading의 자식 중 첫번째 span*/
	/*nth-child : 형제 사이에서의 순서*/
	animation-delay: 0s;
	background-color: red;
}

.loading-dim-layer .loading span:nth-child(2) {
	animation-delay: 0.2s;
	background-color: orange;
}

.loading-dim-layer  .loading span:nth-child(3) {
	animation-delay: 0.4s;
	background-color: yellowgreen;
}

@keyframes loading {        /*loading이라는 keyframe 애니메이션*/
   0%,                      /* 0, 50, 100은 구간*/
   100% {
     opacity: 0;            /* 안보였다가 */
     transform: scale(0.5); /*transform의 scale로 요소를 확대 또는 축소할 수 있음*/
   }
   50% {
     opacity: 1;             /* 보였다가 */
     transform: scale(1.2); /* 1.2배 */
   }
 }

html

<div class="loading-dim-layer">
		<div class="loading-klover-dimBg"></div>
		<div id="loading-klover-layer" class="loading-pop-layer">
			<div class="loading-pop-container">
				<div class="loading-pop-conts">						
				<div class="loading">
				      <span></span>   
				      <span></span>
				      <span></span>
				</div>						
				</div>			
			</div>
		</div>
</div>