文章详情
功能：发送网络请求时等待加载的圈圈动态显示，网络请求成功后关闭提示圈圈
代码：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css画动态等待转圈效果</title>
<link rel="stylesheet" href="public/index.css" rel="external nofollow" >
</head>
<style type="text/css">
.toast {
display: none;
position: fixed;
flex-direction: column;
justify-content: center;
align-items: center;
width: 18rem;
height: 18rem;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #4A4A4B;
border-radius: 1rem;
color: #f0f0f0;
font-size: 2.5rem;
}
.load {
display: inline-block;
margin-bottom: 1.5rem;
height: 4rem;
width: 4rem;
border: 0.4rem solid transparent;
border-top-color: white;
border-left-color: white;
border-bottom-color: white;
animation: circle 1s infinite linear;
-webkit-animation: circle 1s infinite linear; /* Safari 和 Chrome */
border-radius: 50%
}
@-webkit-keyframes circle {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg)
}
}
</style>
<body>
<div>
<span></span>
<span>加载中...</span>
</div>
<script src="public/jquery.min.js"></script>
<script>
$(function () {
$('.toast').css({display: 'flex'})
//这里可以写网络请求代码...
$.ajax({
url: '/api/login',
type: 'POST',
data: {username: '111'},
dataType: 'json',
success: function (data) {//请求成功则关闭圈圈
$('.toast').css({display: 'none'})
},
error: function (e) {
console.log(e)
}
})
});
</script>
</body>
</html>效果：
到此这篇关于jquery实现加载更多“转圈圈“效果的文章就介绍到这了。
您可能感兴趣的文章:
- jquery实现ul列表中点击li选择radio
- jquery.qrcode.js生成二维码并转成图片格式
- 如何在vue 中引入使用jquery
- jQuery实现移动端扭蛋机抽奖
- jQuery zTree如何改变指定节点文本样式
版权：版权申明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 70068002@qq.com 举报，一经查实，本站将立刻删除。
转载请注明出处：https://www.stntk.com/2487.html/dongtai/web/
相关推荐
JS前端模拟Excel条件格式实现数据条效果
需求背景 最近业务中遇到一个有意思的需求，是要在现有的表格中实现类似 Excel 中的数据条的效果，在数据比较多的时候单纯看表格里的数字会比…
js 实现汉字简体和繁体之间的互相转换
简体字 简体字（Simplified Chinese，简体中文），是中国大陆地区目前在用的字体，由官方公布的简体字，主要由传承字以及1950…
如何使用nginx配置代理多个前端资源？
背景 两套不同的前端使用同一个后端服务，前端使用的Nginx代理的dist包 前端 vue+elementui 后端 Python+flas…
jquery实现ul列表中点击li选择radio
如何利用jquery实现ul列表中点击li选择radio呢？ 1、HTML代码 <ul class="list-group"> …
vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)
公司UI设计的拟态框弹窗跟Element Plus UI的布局不太一致。导致不能够直接修改样式得到想到样式。直接上图。 这个需求最主要的是要…
前端如何实现网页变灰功能？
今天来从前端的角度看看网页置灰是如何实现的，以及相关使用技巧！ 实现思路 先来看看一些主流网站是如何实现置灰的： BiliBili： 京东 …
还没有评论呢，快来抢沙发~