html 加载动画

最新推荐文章于 2024-05-09 08:18:52 发布

今天你码了吗

最新推荐文章于 2024-05-09 08:18:52 发布

阅读量54

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_50249353/article/details/131829111

版权

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>订单生成中</title>
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black"> 
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> 
  <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate"> 
  <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT"> 
  <meta HTTP-EQUIV="expires" CONTENT="0">
  <script type="text/javascript" src="./index.js"></script>
  <style type="text/css">
   * {
   	padding: 0;
   	margin: 0;
   }
   
   .loading{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
   	height: 40px;
   	/* margin: auto auto; */
   	display: flex;
   	justify-content: center;
   }
   .loading span{
   	width: 8px;
   	height: 100%;
   	border-radius: 4px;
   	background-color: lightgoldenrodyellow;
   	animation: load 1s ease infinite;
   	margin: 0 2px;
   }
   @keyframes load{
   	0%,
   	100% {
   		transform: scaleY(1.5);
   		background-color: lightgoldenrodyellow;
   	}
   	50% {
   		transform: scaleY(1);
   		background-color: whitesmoke;
   	}
   }
   
   .loading span:nth-child(2){
   	animation-delay: 0.2s;
   }
   .loading span:nth-child(3){
   	animation-delay: 0.4s;
   }
   .loading span:nth-child(4){
   	animation-delay: 0.6s;
   }
   .loading span:nth-child(5){
   	animation-delay: 0.8s;
   }
  </style>
</head>
<body>
	<div class="loading">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
	 <script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
	 <script type="text/javascript">
		 console.log(location)
	      // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
	      document.addEventListener('UniAppJSBridgeReady', function() {
	      				uni.postMessage({
	      				            data: {
	      				                action: location.search.split('=')[1]
	      				            }
	      				        });
		})
		
	</script>
</body>
</html>

直接看代码