jquery实现加载更多"转圈圈"效果(示例代码)


Posted in jQuery onNovember 09, 2020

功能:发送网络请求时等待加载的圈圈动态显示,网络请求成功后关闭提示圈圈
代码:
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实现加载更多&quot;转圈圈&quot;效果(示例代码)

到此这篇关于jquery实现加载更多“转圈圈“效果的文章就介绍到这了,更多相关jquery加载更多转圈圈内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
jquery实现异步加载图片(懒加载图片一种方式)
Apr 24 jQuery
jQuery实现简单的抽奖游戏
May 05 jQuery
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
jquery实现掷骰子小游戏
Oct 24 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
JQuery表单元素取值赋值方法总结
May 12 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery实现购物车全功能
Jan 11 jQuery
jQuery实现移动端扭蛋机抽奖
Nov 08 #jQuery
Jquery Fade用法详解
Nov 06 #jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 #jQuery
使用jQuery实现购物车
Oct 29 #jQuery
jQuery实现简单评论区功能
Oct 26 #jQuery
jquery插件懒加载的示例
Oct 24 #jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
You might like
DedeCMS dede_channeltype表字段注释
2010/04/07 PHP
对PHP PDO的一些认识小结
2015/01/23 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
php根据命令行参数生成配置文件详解
2019/03/15 PHP
JavaScript语言中的Literal Syntax特性分析
2007/03/08 Javascript
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
原生js和jQuery随意改变div属性style的名称和值
2014/10/22 Javascript
javascript实现获取字符串hash值
2015/05/10 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
JavaScript学习笔记之取数组中最大值和最小值
2016/03/23 Javascript
深入理解JS正则表达式---分组
2016/07/18 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python错误提示:[Errno 24] Too many open files的分析与解决
2017/02/16 Python
Pandas之drop_duplicates:去除重复项方法
2018/04/18 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
pycharm安装和首次使用教程
2018/08/27 Python
python实现图片识别汽车功能
2018/11/30 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
Python+logging输出到屏幕将log日志写入文件
2020/11/11 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
css3 利用transform打造走动的2D时钟
2020/10/20 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
专科应届生求职信
2013/11/24 职场文书
开业庆典答谢词
2014/01/18 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
护士节慰问信
2015/02/15 职场文书
就业意向书范本
2015/05/11 职场文书
网络妈妈观后感
2015/06/08 职场文书
2016年秋季趣味运动会开幕词
2016/03/04 职场文书