(css loading) 纯CSS实现loading加载中效果(多种展现形式) 使用纯CSS实现loading加载效果全网首发(图文详解1)

(css loading) 纯CSS实现loading加载中效果(多种展现形式)

使用纯CSS来实现loading加载效果是一种流行的做法，这样可以避免依赖于JS。其实现方式有多种，我将为你提供三种不同的示例。

简单的旋转动画：

.loader {
  width: 50px;
  height: 50px;
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db; 
  border-radius: 50%;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

此代码创建了一个旋转的圆环作为加载动画。

跳跃的点：

.loader {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 60px;
}

.loader div {
  position: absolute;
  top: 18px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #3498db;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}

.loader div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}

.loader div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}

.loader div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}

.loader div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}

此代码生成了一组跳动的点作为加载动画。

流动条形：

.loader {
  height: 2px;
  width: 150px;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
}

.loader:before {
  display: block;
  position: absolute;
  content: "";
  left: -150px;
  width: 150px;
  height: 2px;
  background-color: #3498db;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  from {left: -150px; width: 30%;}
  50% {width: 30%;}
  70% {width: 70%;}
  80% { left: 50%;}
  95% {left: 120%;}
  to {left: 100%;}
}

此代码创建了一个从左到右流动的条形作为加载动画。

这些就是你可以使用纯CSS来实现loading加载效果的三种方法，你可以根据自己的需求进行选择。
(python 路径) Python中文件路径常用操作总结文件路径操作：Python中的os和shutil模块全网首发(图文详解1)
(vue3 websocket) 详解vue3中websocket的封装与使用使用WebSocket在Vue3项目中的基本步骤全网首发(图文详解1)