깔끔한 Page Loading SVG

페이지 이동시 보여지는 로딩 애니메이션 구현 소스 입니다.

 

미리보기

http://ubang.iptime.org/

Rainbow Garden

소스 적용

STYLE

    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0);
    padding: 20px;
    border-radius: 10px;
    z-index: 999;

 

SCRIPT

        function showLoading() {
            document.getElementById("loading_overlay").style.display = "block";
        }
        function hideLoading() {
            document.getElementById("loading_overlay").style.display = "none";
        }
        window.onload = function() {
            showLoading();
            setTimeout(function() {
                hideLoading();
            }, 1000);
        };
        window.onpopstate = function(event) {
            hideLoading();
        };
        window.history.replaceState({}, '');

 

HTML

<div id="loading_overlay">
<svg width="100" height="100" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="rainbowGradient" x1="0%" y1="0%" x2="100%" y2="100%">
      <stop offset="0%" style="stop-color: red; stop-opacity: 1" />
      <stop offset="25%" style="stop-color: orange; stop-opacity: 1" />
      <stop offset="50%" style="stop-color: yellow; stop-opacity: 1" />
      <stop offset="75%" style="stop-color: green; stop-opacity: 1" />
      <stop offset="90%" style="stop-color: blue; stop-opacity: 1" />
      <stop offset="100%" style="stop-color: violet; stop-opacity: 1" />
    </linearGradient>
  </defs>
  <style>
    .spinner_0XTQ {
      transform-origin: center;
      animation: spinner_y6GP .75s linear infinite;
    }
    @keyframes spinner_y6GP {
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <path class="spinner_0XTQ" fill="url(#rainbowGradient)" d="M12,23a9.63,9.63,0,0,1-8-9.5,9.51,9.51,0,0,1,6.79-9.1A1.66,1.66,0,0,0,12,2.81h0a1.67,1.67,0,0,0-1.94-1.64A11,11,0,0,0,12,23Z"/>
</svg>
</div>