jquery实现加载更多"转圈圈"效果(示例代码)
更新时间：2020年11月09日 15:57:58 作者：智慧女孩要秃头~
这篇文章主要介绍了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加载更多转圈圈内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在使用MVC时，向服务器端发送POST请求时有时需要传递数组作为参数值,下面通过实例代码给大家介绍jQuery Ajax向服务端传递数组参数值的方法，一起看看吧2017-09-09
这篇文章主要介绍了jQuery中阻止冒泡事件的方法介绍,需要的朋友可以参考下2014-04-04
本文给大家介绍使用ajax和jquery动态加载数据的实现方法，使用jQuery可以简化这个过程。下面通过实例代码给大家介绍下，需要的的朋友参考下吧2016-12-12
jquery trigger伪造a标签的click事件取代window.open方法
这篇文章主要介绍了使用jquery trigger 触发a标签的click事件取代window.open方法,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了jQuery简单实现根据日期计算星期几的方法,涉及jQuery针对日期时间简单计算相关操作技巧,需要的朋友可以参考下2019-01-01
这篇文章主要介绍了jQuery中position()方法用法,实例分析了position()方法的功能、定义及获取匹配元素相对某些元素的偏移量时的使用技巧,需要的朋友可以参考下2015-01-01
本篇文章主要介绍了jQuery操作css样式的相关知识，具有很好的参考价值。下面跟着小编一起来看下吧2017-05-05
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
这篇文章主要介绍了jQuery实现可以控制图片旋转角度效果,可实现通过下方的滑块拖动控制图片旋转的功能,涉及jQuery操作页面元素样式动态变换的技巧,并附带demo源码供读者下载,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了jquery删除指定子元素代码实例,本文使用较简单的方法实现了这个需求,代码一看就懂,需要的朋友可以参考下2015-01-01
当我们遇到提交表单时，需要我们重复添加好几个表单，在订单表格中添加多个不同型号的产品信息。这个时候有复制表单表单按钮，也就是新增一项，通过点击复制按钮来实现新增一项，怎么实现的呢？下面小编跟大家分享，需要的朋友的朋友可以参考下2015-09-09
最新评论