그누보드 페이지 로딩 표시하기 회전하는 로딩 애니메이션 소스 > 자유게시판

출처: https://sir.kr/bbs/board.php?bo_table=g5_skin&wr_id=46345

또 다른 예시

출처: https://wsss.tistory.com/1463?category=728352

<style>
    /* 로딩전 화면을 가리기 */
    #ringloadings {
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: #ffffff;
        z-index: 999999;
    }
    
    /* 로더 */
#ringy
{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  background:transparent;
  border:3px solid #F0F0F0; 
  border-radius:50%;
  text-align:center;
  line-height:150px;
  font-family:sans-serif;
  font-size:20px;
  color:#fff000;
  letter-spacing:4px;
  text-transform:uppercase;
  text-shadow:0 0 10px #fff000;
  box-shadow:0 0 20px rgba(0,0,0,.5);
}
#ringy:before
{
  content:'';
  position:absolute;
  top:-3px;
  left:-3px;
  width:100%;
  height:100%;
  border:3px solid transparent;
  border-top:3px solid #fff000;
  border-right:3px solid #fff000;
  border-radius:50%;
  animation:animateC 2s linear infinite;
}
ringspan
{
  display:block;
  position:absolute;
  top:calc(50% - 2px);
  left:50%;
  width:50%;
  height:4px;
  background:transparent;
  transform-origin:left;
  animation:animate 2s linear infinite;
}
ringspan:before
{
  content:'';
  position:absolute;
  width:16px;
  height:16px;
  border-radius:50%;
  background:#fff000;
  top:-6px;
  right:-8px;
  box-shadow:0 0 20px #fff000;
}
    
    /* 로더 애니메이션 */
@keyframes animateC
{
  0%
  {
    transform:rotate(0deg);
  }
  100%
  {
    transform:rotate(360deg);
  }
}
@keyframes animate
{
  0%
  {
    transform:rotate(45deg);
  }
  100%
  {
    transform:rotate(405deg);
  }
}
</style>

<!-- 시작 -->
<div id="ringloadings">
    <div id="ringy">Loading
        <ringspan></ringspan>    
    </div>
</div>

<script>
    
    $(window).on("load", function() {
        $('#ringloadings').fadeOut(500);
    });
    

/*    $(window).on("load", function() {
        setTimeout(function() {
        $('#ringloadings').fadeOut(500);
        }, 1500); // 시간 조절
    });
*/

</script>
<!-- 끝 -->