jquery实现加载更多“转圈圈“效果

最新推荐文章于 2023-09-23 15:14:41 发布

慢吞吞的树懒

最新推荐文章于 2023-09-23 15:14:41 发布

阅读量1k

点赞数 1

分类专栏： css 文章标签： css js jquery ajax

本文链接：https://blog.csdn.net/weixin_44824839/article/details/109577896

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

功能：发送网络请求时等待加载的圈圈动态显示，网络请求成功后关闭提示圈圈
代码：
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css画动态等待转圈效果</title>
    <link rel="stylesheet" href="public/index.css">
</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>

效果：
在这里插入图片描述

慢吞吞的树懒

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
jquery实现加载更多“转圈圈“效果

功能：发送网络请求时等待加载的圈圈动态显示，网络请求成功后关闭提示圈圈代码：index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css画动态等待转圈效果</title> <link rel="stylesheet" href="public/index.css"></head&gt
复制链接

扫一扫