CSS Loading动画的演示与实现

CSS Loading动画是一种被广泛应用的网页动态效果，常用于展示页面加载状态或者某些交互操作的展现方式。在本文中，我们将从多个方面对CSS Loading动画进行详细的阐述和演示，以及实现一些常见的CSS Loading效果。

一、CSS Loading动画

CSS Loading动画的作用是为等待用户等待过渡提供友好的交互体验。其中，CSS动画由多个关键帧组成，每个关键帧都对应着其在动画过渡过程中的状态，通过CSS的属性改变来模拟一些动态效果。

二、CSS Loading动画转动圆圈实现

我们可以通过CSS实现一个简单的转动动画效果：一个圆圈在自行旋转。


@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.loading {
  display: inline-block;
  animation: rotate 1s linear infinite;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #e67e22;
}

代码分析：

代码中，我们使用了CSS3的@keyframes关键帧实现了一个旋转过渡的动画效果，将CSS动画声明为无限循环。同时，我们创建了一个.loading类，应用于HTML元素上，指定了其高度、宽度、样式、动画时间以及圆角等各种属性。最终生成的效果是一个旋转的圆圈。

三、CSS Loading动画蒙层效果实现

另一种较为常见的CSS Loading动画效果是蒙层效果。该效果在整个页面的正中央，显示一个用户不能操作的蒙层，在蒙层上展示一些正在加载或等待完成的信息。


.loader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.loader .inner {
  width: 30%;
  height: 30%;
  padding: 2rem;
  background-color: #fff;
  border-radius: 0.5rem;
  text-align: center;
}

代码分析：

代码中，我们创建了两个类loader和inner。其中，loader类作为蒙层元素，将其定位于整个页面的正中央，包含一个内部元素inner，用于展示用户等待的信息，统一用白色背景、略带圆角的外观设计。loader的z-index属性较高，用于覆盖在其他元素之上，防止用户进行操作。

四、CSS Loading动画加载状态展示效果实现

在某些情况下，CSS Loading动画用于模拟表单提交、数据上传、视频播放等等等待用户完成某项操作的过程。此时，可以将CSS Loading动画集成到等待用户完成操作的组件中，显示组件内部状态的变化。



   
  
    
  
    上传中...


.progress-bar {
  position: relative;
  width: 100%;
  height: 10px;
  background-color: #efefef;
  border-radius: 3px;
}

.progress {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 10%;
  background-color: #3498db;
  -webkit-animation: upload-progress 2s ease-out infinite;
  animation: upload-progress 2s ease-out infinite;
}

.progress-bar-text {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

@keyframes upload-progress {
  0% {
    width: 0%;
  }
  50% {
    width: 50%;
  }
  90% {
    width: 90%;
  }
  100% {
    width: 100%;
  }
}

代码分析：

代码中，我们创建了一个进度条组件progress-bar，该组件内部包含进度条进度元素progress、进度提示信息元素progress-bar-text。在动画中，我们使用CSS3的@keyframes和animation属性，实现进度条进度从0%到100%变化的过程，模拟了表单提交等待的过程。同时，进度提示信息元素也随之变化。