HTML 元素内部添加预加载

阳光穿透心脏的1/2处 2023-02-10 01:20 79阅读 0赞

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：

完整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>

显示效果：

![20200519164428456.png][]

[20200519164428456.png]: https://img-blog.csdnimg.cn/20200519164428456.png