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

网络编程 发布日期：2024/11/10 浏览次数：1

正在浏览：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="/UploadFiles/2021-04-02/jquery.min.js">


效果：


jquery实现加载更多"转圈圈"效果(示例代码)
上一篇：vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
下一篇：夯基础之手撕javascript继承详解

一句话新闻

Windows上运行安卓你用过了吗
在去年的5月23日，借助Intel Bridge Technology以及Intel Celadon两项技术的驱动，Intel为PC用户带来了Android On Windows（AOW）平台，并携手国内软件公司腾讯共同推出了腾讯应用宝电脑版，将Windows与安卓两大生态进行了融合，PC的使用体验随即被带入到了一个全新的阶段。