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

已于 2023-07-05 11:00:05 修改
阅读量2.5k 收藏 6
点赞数 2
分类专栏： layui 前端 前端插件效果 文章标签： css html 前端 html5 css3
于 2022-01-21 12:16:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43992507/article/details/122618661
版权
前端 同时被 3 个专栏收录
94 篇文章 2 订阅
订阅专栏
前端插件效果
40 篇文章 0 订阅
订阅专栏
layui
30 篇文章 4 订阅
订阅专栏

目录

效果图

方式一

在这里插入图片描述

方式二

在这里插入图片描述

方式三

在这里插入图片描述

方式四

在这里插入图片描述

代码

方式一代码

<!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;
				border-radius: 100%;
			}
			
			.layui-m-layer2 .layui-m-layercont i.layui-m-layerload {
				-webkit-animation-delay: -.16s;
				animation-delay: -.16s;
			}
			
			.layui-m-layer2 .layui-m-layercont i {
				-webkit-animation: layui-m-anim-loading 1.4s infinite ease-in-out;
				animation: layui-m-anim-loading 1.4s infinite ease-in-out;
				-webkit-animation-fill-mode: both;
				animation-fill-mode: both;
			}
			
			.layui-m-layer2 .layui-m-layercont i {
				background-color: #7be19f!important;
			}
			
			@keyframes layui-m-anim-loading {
				0%,
				80%,
				100% {
					transform: scale(0);
					-webkit-transform: scale(0);
				}
				40% {
					transform: scale(1);
					-webkit-transform: scale(1);
				}
			}
		</style>
	</head>
	
	<body>
		<div id="layer-loading" class="layui-m-layer layui-m-layer2" index="0">
			<div class="layui-m-layershade"></div>
			<div class="layui-m-layermain">
				<div class="layui-m-layersection">
					<div class="layui-m-layerchild  layui-m-anim-scale">
						<div class="layui-m-layercont">
							<i></i>
							<i class="layui-m-layerload"></i>
							<i></i>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>

方式二代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>加载中块</title>
		<style>
			/* 加载中-转圈圈 */
			.lay-loader .lay-loader-inner:before {
				content: "";
				top: 5px;
				left: 5px;
				right: 5px;
				bottom: 5px;
				animation: spin 3s linear infinite;
			}
			
			.lay-loader .lay-loader-inner:after {
				content: "";
				top: 15px;
				left: 15px;
				right: 15px;
				bottom: 15px;
				animation: spin 1.5s linear infinite;
			}
			
			.lay-loader .lay-loader-inner {
				display: block;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				width: 150px;
				height: 150px;
				margin: auto;
				animation: spin 2s linear infinite;
			}
			
			.lay-loader .lay-loader-inner,
			.lay-loader .lay-loader-inner:before,
			.lay-loader .lay-loader-inner:after {
				position: absolute;
				border-radius: 50%;
				border: 3px solid transparent;
				border-top-color: #03c5b3;
			}
			
			.lay-loader {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #ffffff;
				z-index: 9999999999;
			}
			
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
				to {
					transform: rotate(1turn);
				}
			}
		</style>
	</head>

	<body>
		<!-- 加载中 转圈圈 -->
		<div class="lay-loader">
			<div class="lay-loader-inner"></div>
		</div>
	</body>

</html>

方式三代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			/**加载中-方形四个圈*/
			.yuan-box {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: #ffffff;
				z-index: 9999999999;
			}
			
			.yuan-box-loading {
				position: fixed;
				width: 36px;
				font-size: 0;
				display: inline-block;
				transform: rotate(45deg);
				animation: loadingRotate 1.2s infinite linear;
				top: calc(50% - 18px);
				left: calc(50% - 18px)
			}
			
			.yuan-box-loading span {
				width: 10px;
				height: 10px;
				margin: 4px;
				border-radius: 50%;
				background: #5993ff;
				display: inline-block;
				opacity: .9
			}
			
			.yuan-box-loading span:nth-child(2) {
				opacity: .7
			}
			
			.yuan-box-loading span:nth-child(3) {
				opacity: .5
			}
			
			.yuan-box-loading span:nth-child(4) {
				opacity: .3
			}
			
			@keyframes loadingRotate {
				to {
					transform: rotate(405deg)
				}
			}
		</style>
	</head>

	<body>
		<div class="yuan-box">
			<div class="yuan-box-loading">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>

</html>

方式四代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		.yuan-box {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: #ffffff;
			z-index: 9999999999;
		}
		
		#preloader_1 {
			position: fixed;
			width: 100px;
			height: 50px;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
		}
		
		#preloader_1 span {
			display: block;
			bottom: 0px;
			width: 5px;
			height: 5px;
			background: #9b59b6;
			position: absolute;
			-webkit-animation: preloader_1 2s infinite ease-in-out;
			-moz-animation: preloader_1 2s infinite ease-in-out;
			-ms-animation: preloader_1 2s infinite ease-in-out;
			animation: preloader_1 2s infinite ease-in-out;
		}
		
		#preloader_1 span:nth-child(2) {
			left: 11px;
			-webkit-animation-delay: .2s;
			-moz-animation-delay: .2s;
			-ms-animation-delay: .2s;
			-o-animation-delay: .2s;
			animation-delay: .2s;
		}
		
		#preloader_1 span:nth-child(3) {
			left: 22px;
			-webkit-animation-delay: .4s;
			-moz-animation-delay: .4s;
			-ms-animation-delay: .4s;
			-o-animation-delay: .4s;
			animation-delay: .4s;
		}
		
		#preloader_1 span:nth-child(4) {
			left: 33px;
			-webkit-animation-delay: .6s;
			-moz-animation-delay: .6s;
			-ms-animation-delay: .6s;
			-o-animation-delay: .6s;
			animation-delay: .6s;
		}
		
		#preloader_1 span:nth-child(5) {
			left: 44px;
			-webkit-animation-delay: .8s;
			-moz-animation-delay: .8s;
			-ms-animation-delay: .8s;
			-o-animation-delay: .8s;
			animation-delay: .8s;
		}
		
		@-webkit-keyframes preloader_1 {
			0% {
				height: 5px;
				-webkit-transform: translateY(0px);
				background: #9b59b6;
			}
			25% {
				height: 30px;
				-webkit-transform: translateY(15px);
				background: #3498db;
			}
			50% {
				height: 5px;
				-webkit-transform: translateY(0px);
				background: #9b59b6;
			}
			100% {
				height: 5px;
				-webkit-transform: translateY(0px);
				background: #9b59b6;
			}
		}
		
		@-moz-keyframes preloader_1 {
			0% {
				height: 5px;
				-moz-transform: translateY(0px);
				background: #9b59b6;
			}
			25% {
				height: 30px;
				-moz-transform: translateY(15px);
				background: #3498db;
			}
			50% {
				height: 5px;
				-moz-transform: translateY(0px);
				background: #9b59b6;
			}
			100% {
				height: 5px;
				-moz-transform: translateY(0px);
				background: #9b59b6;
			}
		}
		
		@-ms-keyframes preloader_1 {
			0% {
				height: 5px;
				-ms-transform: translateY(0px);
				background: #9b59b6;
			}
			25% {
				height: 30px;
				-ms-transform: translateY(15px);
				background: #3498db;
			}
			50% {
				height: 5px;
				-ms-transform: translateY(0px);
				background: #9b59b6;
			}
			100% {
				height: 5px;
				-ms-transform: translateY(0px);
				background: #9b59b6;
			}
		}
		
		@keyframes preloader_1 {
			0% {
				height: 5px;
				transform: translateY(0px);
				background: #9b59b6;
			}
			25% {
				height: 30px;
				transform: translateY(15px);
				background: #3498db;
			}
			50% {
				height: 5px;
				transform: translateY(0px);
				background: #9b59b6;
			}
			100% {
				height: 5px;
				transform: translateY(0px);
				background: #9b59b6;
			}
		}
	</style>

	<body>
		<!-- 参考类似的：https://blog.csdn.net/m0_47207594/article/details/127598024 -->
		<div class="yuan-box">
			<div id="preloader_1">
				<span></span>
				<span></span>
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</body>

</html>
慕云枫
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5数据加载中请稍后效果,IE8浏览器中一直处于“正在努力地加载数据中，请稍候……”...
weixin_34928522的博客
06-03 2143
我先详细的描述我的开发环境：OS: windows 7Browser: IE 8.0.76 (64-bit)bootstrap-table v1.11.1jQuery v1.11.3Bootstrap v3.3.7RequireJS v2.3.5我编写的html页面和bootstrap-table的用法/* html页面 *//* index.js主要部分，后台接口是java编写 */requi...
使用css3实现超炫的loading加载动画效果
09-25
在本文中，我们将深入探讨如何使用CSS3来创建引人注目的加载动画效果，特别是针对“SpinKit”库中的几种加载动画。CSS3是层叠样式表的第三版，引入了许多新特性，其中包括动画（Animations），这使得创建动态且平滑...
代码实现加载中的效果
bianguanyue的博客
04-20 536
竖线的进度条效果：利用分别设置5个<li>的高度变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .loadi...
CSS实现三个加载中的小动画
Sirius小鑫的博客
04-09 1253
使用CSS的动画animation定义动画的属性：动画名、执行时间、执行速度函数和执行的次数，定义关键帧@keyframe来实现动画细节。
HTML实现进度条/加载框模版
最新发布
joe_g12345的博客
06-09 879
【代码】HTML实现进度条/加载框模版。
html5 网页加载中效果
11-22
1.html5页面加载效果 2.类似安卓toast提示效果 3.IOS7.0 删除确认提示 上面有源代码，部分注释，下载后可以根据项目的需求更改里面的代码
css跳动文字——加载中
zzx262625的博客
06-02 693
在写一些前端页面时需要一段时间的请求，这段时间为了不那么单调就会加上一些过度效果；今天写一个css跳动样式——加载中希望对你有所帮助。上述中如需更改跳动间隔可以再 .loading-text span:nth-child(3) { animation-delay: 0.2s;然后就是css部分了；主要就是运用css动画效果进行跳动的。
轻松掌握 CSS，实现 loading 加载中的多种形式
Shids_的博客
02-08 6070
轻松掌握 CSS，实现 loading 加载中的多种形式
css3实现加载loading特效小动画效果
06-12
本文将深入探讨如何利用CSS3来实现吸引人的加载特效小动画效果。 首先，CSS3中的关键帧动画（@keyframes）是实现这种效果的核心。通过定义动画的起始状态和结束状态，以及可能的中间状态，可以创建平滑过渡的效果。...
纯css3太阳加载中动画特效
07-24
在本文中，我们将深入探讨“纯CSS3太阳加载中动画特效”这一主题，这是一种利用CSS3的关键帧（keyframes）属性来创建创新的太阳图标加载动画的技术。 首先，我们来理解“纯CSS3”意味着什么。纯CSS3是指完全依赖于...
JS+CSS实现网页加载中的动画效果
10-19
这种技术常用于在页面数据异步加载时展示一个“加载中”的提示，让用户知道后台正在进行处理。 首先，实现这种效果需要以下材料： 1. 一张用来表示加载状态的loading动画GIF图片。 基本逻辑是这样的： 1. 创建一个...
非常好看的CSS加载中特效，引用css文件既可用
02-04
非常好看的CSS加载中特效，引用css文件既可用
单元素实现的CSS 加载进度提示效果
09-08
以上就是利用单元素实现CSS加载进度提示效果的基本方法和关键技巧。根据实际需求，可以调整颜色、尺寸、动画时间等参数，以适应不同的设计风格和场景。通过灵活运用CSS，我们可以创造出各种富有创意的加载进度提示...
每日分享html特效篇之五个加载页面特效和五个导航按钮特效
小淼淼的博客
09-27 2536
每日分享html特效篇之五个加载页面特效和五个导航按钮特效
css 制作一个 加载中 动画
小二丶的博客
05-18 589
创建 一个 css 文件 load.css 文件名 然后在 使用 加载动画中 进行引入。js 、 Jq 调试 显示 隐藏就可以了。这里使用的 jq 的方法。
HTML加载页面
sunzequan888的博客
07-15 1673
HTML加载页面
【Html】Html+Less实现一个简单的加载动画
少莫千华
06-25 945
这些并不能被浏览器识别，然后渲染。为什么会出现这种情况，是因为less编译器的版本、不同系统Windows、Mac等的语法兼容性导致的。
html实现加载效果,CSS3实现加载中效果
weixin_39564605的博客
06-03 346
代码：loadingbody { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; ...
HTML+CSS实现加载动画
weixin_44260108的博客
12-30 476
使用CSS、HTML来实现内容加载的动画效果
html+css+js实现图片懒加载
06-02
图片懒加载可以通过以下步骤实现： 1. 在 HTML 中，将图片的 src 属性设置为一个占位符或者空值，例如： ``` <img src="placeholder.jpg" data-src="real-image.jpg" /> ``` 2. 在 CSS 中，为占位符图片设置宽度和高度，以确保页面布局不会因为图片加载而改变： ``` img { width: 100%; height: auto; } ``` 3. 在 JavaScript 中，监听滚动事件，当图片进入可视区域时，将 data-src 属性的值赋给 src 属性，实现图片的懒加载： ``` window.addEventListener('scroll', function() { var images = document.querySelectorAll('img[data-src]'); for (var i = 0; i < images.length; i++) { var image = images[i]; if (image.getBoundingClientRect().top < window.innerHeight) { image.src = image.getAttribute('data-src'); image.removeAttribute('data-src'); } } }); ``` 这样，当用户滚动页面时，图片会在进入可视区域时才被加载，从而加快页面加载速度。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值