css点点点加载提示

在我们平时的网页中，会经常见到一些页面的加载需要时间较长的情况，如果没有适当的加载提示，那么用户可能就会感觉到页面出现了延迟，这显然是一种很不好的用户体验。 为此，我们可以使用CSS的点点点动画来给用户提供一个页面正在加载中的提示。

.loading {
  width: 60px;
  height: 20px;
  font-size: 0;
}
.loading::before,
.loading::after,
.loading span {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #333333;
  animation: load 1s linear infinite;
}
.loading::before {
  margin-right: 5px;
  animation-delay: 0;
}
.loading span {
  margin-right: 5px;
  animation-delay: 0.2s;
}
.loading::after {
  animation-delay: 0.4s;
}
@keyframes load {
  0% {
  
  opacity: 0;
  
  transform: scale(0);
}
  20% {
  
  opacity: 1;
}
  100% {
  
  transform: scale(1);
}
}
 

上面的CSS代码就是一个简单的点点点加载动画，它会一直循环播放，直到页面加载完成。我们可以通过HTML将这个CSS类添加到一个包裹在内容上方的div上。这样，当页面正在加载时，用户看到的就是一个简单的、有气氛的加载动画，页面加载完成后，该元素会自动消失。