html加载中实现效果，css实现加载中

慕云枫

已于 2023-07-05 11:00:05 修改

阅读量2.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： layui 前端前端插件效果文章标签： css html 前端 html5 css3

于 2022-01-21 12:16:39 首次发布

本文链接：https://blog.csdn.net/weixin_43992507/article/details/122618661

效果图

方式一

在这里插入图片描述

方式二

在这里插入图片描述

方式三

在这里插入图片描述

方式四

在这里插入图片描述

代码

方式一代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>加载中块</title>
		<style>
			.layui-m-layer {
     
     
				position: relative;
				z-index: 19891014;
			}
			
			.layui-m-layershade {
     
     
				background-color: rgba(0, 0, 0, .7);
				pointer-events: auto;
			}
			
			.layui-m-layermain,
			.layui-m-layershade {
     
     
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			
			.layui-m-layer * {
     
     
				-webkit-box-sizing: content-box;
				-moz-box-sizing: content-box;
				box-sizing: content-box;
			}
			
			.layui-m-layershade {
     
     
				background: white;
			}
			
			.layui-m-layermain {
     
     
				display: table;
				font-family: Helvetica, arial, sans-serif;
				pointer-events: none;
			}
			
			.layui-m-layermain,
			.layui-m-layershade {
     
     
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
			
			.layui-m-layermain .layui-m-layersection {
     
     
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
			
			.layui-m-layer2 .layui-m-layerchild {
     
     
				width: auto;
				max-width: 260px;
				min-width: 40px;
				border: none;
				background: none;
				box-shadow: none;
				color: #fff;
			}
			
			.layui-m-anim-scale {
     
     
				animation-name: layui-m-anim-scale;
				-webkit-animation-name: layui-m-anim-scale;
			}
			
			.layui-m-layerchild {
     
     
				position: relative;
				display: inline-block;
				text-align: left;
				background-color: #fff;
				font-size: 14px;
				border-radius: 5px;
				box-shadow: 0 0 8px rgb(0 0 0 / 10%);
				pointer-events: auto;
				-webkit-overflow-scrolling: touch;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
				-webkit-animation-duration: .2s;
				animation-duration: .2s;
			}
			
			.layui-m-layer2 .layui-m-layercont {
     
     
				text-align: center;
				padding: 0;
				line-height: 0;
			}
			
			.layui-m-layercont {
     
     
				padding: 50px 30px;
				line-height: 22px;
				text-align: center;
			}
			
			.layui-m-layer2 .layui-m-layercont i:first-child {
     
     
				margin-left: 0;
				-webkit-animation-delay: -.32s;
				animation-delay: -.32s;
			}
			
			.layui-m-layer2 .layui-m-layercont i {
     
     
				width: 30px;
				height: 30px;
				margin-left: 8px;
				display: inline-block;
				background-color: #fff;