原生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