给网页做一个遮罩loading转圈圈效果，数据加载的时候显示，数据加载完毕消失

最新推荐文章于 2023-04-10 19:30:25 发布

原创

最新推荐文章于 2023-04-10 19:30:25 发布 · 2.6k 阅读

7 ·

CC 4.0 BY-SA版权

本文介绍了如何在网页中创建一个loading转圈圈效果，该效果在数据加载时显示，加载完成后自动消失。通过结合遮罩层和AJAX调用方法，实现了优雅的用户体验。参考了相关CSS3和JavaScript实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

loading转圈圈效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
 .spinner {
  margin: 100px auto;
  width: 40px;
  height: 40px;
  position: relative;
}
 /* 设置所有的圈圈大小及颜色 */
.container1 > div, .container2 > div, .container3 > div {
  width: 12px;
  height: 12px;
  background-color: plum;
  border-radius: 100%;
  position: absolute;
  -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
  animation: bouncedelay 1.2s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .spinner-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
 
.container2 {
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}
 
.container3 {
  -we