jquery实现加载更多"转圈圈"效果(示例代码)
本文向大家介绍jquery实现加载更多"转圈圈"效果(示例代码)，包括了jquery实现加载更多"转圈圈"效果(示例代码)的使用技巧和注意事项，需要的朋友参考一下
功能：发送网络请求时等待加载的圈圈动态显示，网络请求成功后关闭提示圈圈
代码：
index.html
<!DOCTYPE html>
<html lang="en">
<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 class="toast">
<span class="load"></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加载更多转圈圈内容请搜索呐喊教程以前的文章或继续浏览下面的相关文章希望大家以后多多支持呐喊教程！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：notice#yiidian.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
