移动端加载loading动画

最新推荐文章于 2025-03-31 17:24:31 发布

南南合作

最新推荐文章于 2025-03-31 17:24:31 发布

阅读量5.3k

点赞数

分类专栏：提高用户体验

本文链接：https://blog.csdn.net/weixin_42442123/article/details/84875407

版权

提高用户体验专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何使用CSS、HTML和JavaScript实现移动端页面的加载loading动画。通过CSS定义动画样式，HTML创建结构，JavaScript控制加载状态，达到提升用户体验的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
图片

css部分

#tipDiv {
			display: none;
			position: absolute;
			left: 39%;
			top: 230px;
			z-index: 9999;
			background: #d9d9d9;
			padding: 10px;
			border-radius: 5px;
		}
		
		#tipInfo {
			margin-top: 10px;
		}

html部分

<div id="tipDiv">
			<center><img style="width:25px;" src="img/5-121204193R5-50.gif"></center>
			<div id="tipInfo"></div>
		</div>

js部分

//显示
function showTip(info) {
	$('#tipInfo').html(info);
	$('#tipDiv').show();
}
//加载结束关闭
function closeTip() {
	$('#tipDiv').hide();
}
	
$.ajax({
		type: "get",
		url: "",
		dataType: 'json',
		async: true,
		data: {},
		beforeSend: function() {				
			showTip('内容正在加载...')
			},
		complete: function() {
			closeTip()
			},
		success: function(res) {}
	});