/*

<div id="loading_spinner">
  <div class="spinner"></div>
</div>
<div id="loading_spinner">
  <div class="spinner small"></div>
</div>
<div id="loading_spinner">
  <div class="spinner big"></div>
</div>

*/

/* 로딩 영역 */
#loading_spinner{
  display:none;
  position:relative;
  z-index:9999999;
}

/* 동그란 스피너 */
#loading_spinner .spinner{
  width:50px;
  height:50px;
  border:8px solid #ddd;
  border-top:8px solid #eb6101;
  border-radius:50%;
  animation: loading_spinner 1s linear infinite;
  box-shadow:1px 1px 20px rgba(0,0,0,0.1);
}
#loading_spinner .spinner.small{
  width:30px;
  height:30px;
  border:6px solid #ddd;
  border-top:6px solid #eb6101;
}
#loading_spinner .spinner.big{
  width:80px;
  height:80px;
  border:10px solid #ddd;
  border-top:10px solid #eb6101;
}

/* 회전 애니메이션 */
@keyframes loading_spinner{
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(360deg);
  }
}