艾Q网

标题: html怎么添加loading动画 [打印本页]

作者: admin 时间: 2024-4-8 18:41
标题: html怎么添加loading动画
可以使用CSS实现一个简单的loading动画，具体步骤如下：

1. 定义一个加载框的容器，使用position定位在页面中央，并设置宽度、高度和背景颜色等样式。

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: #ffffff;
}

2. 定义加载动画的元素，使用CSS动画实现loading效果。这里使用了一个简单的旋转动画，将动画元素添加到loading容器中。

.loading::after {
  content: '';
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 6px solid #333333;
  border-color: #333333 transparent #333333 transparent;
  animation: loading 1.5s linear infinite;
}
@keyframes loading {
  0% {
transform: rotate(0deg);
  }
  100% {
transform: rotate(360deg);
  }
}

3. 将加载框元素添加到页面中，并使用JavaScript控制显示与隐藏。

<body>
  <div class="loading"></div>
  <script>
// 显示loading
document.querySelector('.loading').style.display = 'block';
// 隐藏loading
document.querySelector('.loading').style.display = 'none';
  </script>
</body>
在实际应用中，还可以使用第三方库或框架来实现更多样化的loading动画。

欢迎光临艾Q网 (http://js.iqi123.com/bbs/)