效果图
代码
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>*{margin: 0;padding: 0;box-sizing: border-box;}.container{width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;background-color: #e2e2e2;}.container .loading{width: 200px;height: 200px;border-radius: 50%;overflow: hidden;background-color: #ffffff;position: relative;display: flex;align-items: center;justify-content: center;}.container .loading .loading-mask{width: 200%;height: 200%;position: absolute;left: -50%;top: 100%;z-index: 1;border-radius: 40%;background-color: rgba(0, 191, 255, 0.8);animation: rotato 10s linear 0s infinite;transition: all 1s;}.container .loading .loading-mask::after{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 1;border-radius: 36%;overflow: hidden;animation: rotato 11s linear 0s infinite;background-color: rgba(0, 191, 255, 0.6);transform:rotate(0deg);-ms-transform:rotate(0deg); /* IE 9 */-moz-transform:rotate(0deg); /* Firefox */-webkit-transform:rotate(0deg); /* Safari 和 Chrome */-o-transform:rotate(0deg); /* Opera */}.container .loading .loading-mask::before{content: "";display: block;width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: 2;border-radius: 30%;overflow: hidden;animation: rotato 10s linear 0s infinite;background-color: rgba(0, 191, 255, 0.4);transform:rotate(45deg);-ms-transform:rotate(45deg); /* IE 9 */-moz-transform:rotate(45deg); /* Firefox */-webkit-transform:rotate(45deg); /* Safari 和 Chrome */-o-transform:rotate(45deg); /* Opera */}.container .loading .loading-text{position: relative;z-index: 9;font-size: 50px;color: #f2f2f2;}@keyframes rotato{0% { transform:rotate(0deg);}100% {transform:rotate(360deg);}}</style><body><div class="container"><div class="loading"><div id="loadingMask" class="loading-mask"></div><div id="loading" class="loading-text">0%</div></div></div><script>window.onload = function(){var process = 0;setInterval(function(){var mask = document.querySelector("#loadingMask")var loadText = document.querySelector("#loading")var top = 100 - processmask.style.top = top + "%"loadText.innerHTML = process + "%"process = process>=100?0:process+1},1000)}</script></body></html>
