原生js實現loading加載動畫

html：

<div class="loading">
                <div class="loading-img">
                    <img src="img/Loading.png" />
                </div>
            </div>

css:

.loading {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vw;
    background-color: rgba(255, 255, 255, 0.8)
}

.loading-img {
    width: 5.556vw;
    height: 5.556vw;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

@keyframes turn {
    0% {
        -webkit-transform: rotate(0deg);
    }
    25% {
        -webkit-transform: rotate(90deg);
    }
    50% {
        -webkit-transform: rotate(180deg);
    }
    75% {
        -webkit-transform: rotate(270deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}

.loading-img img {
    width: 100%;
    animation: turn 1s linear infinite;
}

.loading-none {
    display: none;
}

js:

 function loadingToggle() {
            document.getElementsByClassName('loading')[0].classList.toggle('loading-none');
        }

這段代碼是控制加載動畫是否顯示的
加載的loading圖片是在阿里圖標庫找的
數據加載前調用一次這個函數使其顯示，
數據請求完成後再調用一次這個函數關閉loading