HTML 元素内部添加预加载

CSS：

	/*元素内部加载loading*/.innerLoading {height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;}.innerLoading * {text-align: center;color: #737782cc;fill: #73777A;font-size: 1em !important;font-family: SimSun,SimHei,Arial !important;}.innerLoading > svg {height: 1.5em;width: 1.5em;margin-right: .5em;animation: turn 1.6s linear infinite;}@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);}}

JS：

function StartInnerLoading(target, info) {var loadInfo = info || "正在加载数据……";var svg = "<svg viewBox=\"0 0 1024 1024\"><path d=\"M910.222 455.111V512H682.667v-56.889h227.555z m-625.778 0V512H56.89v-56.889h227.555z m170.667 227.556H512v227.555h-56.889V682.667z m0-625.778H512v227.555h-56.889V56.89z m341.333 699.733l-39.822 39.822-159.289-159.288 39.823-39.823 159.288 159.29zM369.778 329.956l-39.822 39.822-159.29-159.29 39.823-39.821 159.289 159.289z m-39.822 267.377l39.822 39.823-159.29 159.288-39.821-39.822 159.289-159.289z m426.666-426.666l39.822 39.822-159.288 159.289-39.823-39.822 159.29-159.29z\"></path></svg>";var loading = "<div class='innerLoading'>" + svg + "<span>" + loadInfo + "</span></div>";target.empty();target.append(loading);return target.find('.innerLoading');
}function StopInnerLoading(loading) {if (loading) {loading.remove();loading = null;}
}

完整Demo：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head><title> new document </title><meta name="generator" content="editplus" /><meta name="author" content="" /><meta name="keywords" content="" /><meta name="description" content="" /><style>/*元素内部加载loading*/.innerLoading {height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;}.innerLoading * {text-align: center;color: #737782cc;fill: #73777A;font-size: 1em !important;font-family: SimSun,SimHei,Arial !important;}.innerLoading > svg {height: 1.5em;width: 1.5em;margin-right: .5em;animation: turn 1.6s linear infinite;}@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);}}</style></head> <body><div id="test"></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>$(function () {		var loading=StartInnerLoading($('#test'),'让我眯一会儿');setTimeout(()=>{StopInnerLoading(loading);$('#test').text('获取数据成功！');$('#test').css({'text-align':'center'});},5000)});function StartInnerLoading(target, info) {var loadInfo = info || "正在加载数据……";var svg = "<svg viewBox=\"0 0 1024 1024\"><path d=\"M910.222 455.111V512H682.667v-56.889h227.555z m-625.778 0V512H56.89v-56.889h227.555z m170.667 227.556H512v227.555h-56.889V682.667z m0-625.778H512v227.555h-56.889V56.89z m341.333 699.733l-39.822 39.822-159.289-159.288 39.823-39.823 159.288 159.29zM369.778 329.956l-39.822 39.822-159.29-159.29 39.823-39.821 159.289 159.289z m-39.822 267.377l39.822 39.823-159.29 159.288-39.821-39.822 159.289-159.289z m426.666-426.666l39.822 39.822-159.288 159.289-39.823-39.822 159.29-159.29z\"></path></svg>";var loading = "<div class='innerLoading'>" + svg + "<span>" + loadInfo + "</span></div>";target.empty();target.append(loading);return target.find('.innerLoading');}function StopInnerLoading(loading) {if (loading) {loading.remove();loading = null;}}</script></body>
</html>

显示效果：