当前位置: 萬仟网 > IT编程>开发语言>Jquery > jquery实现加载更多"转圈圈"效果(示例代码)

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

2020年11月09日  | 萬仟网IT编程  | 我要评论
功能:发送网络请求时等待加载的圈圈动态显示,网络请求成功后关闭提示圈圈代码:index.html<!doctype html><html lang="en"><head&

功能:发送网络请求时等待加载的圈圈动态显示,网络请求成功后关闭提示圈圈
代码:
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加载更多转圈圈内容请搜索萬仟网以前的文章或继续浏览下面的相关文章希望大家以后多多支持萬仟网!

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
Copyright © 2017-2021  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com