加载动画 · Swift Donkey

类型：组件　·　分类：加载动画　·　收录：2026-09-19　·　源码：会员可见

[hidecontent type="vip1"]

<div class="loader3">
  <div class="bars bar1"></div>
  <div class="bars bar2"></div>
  <div class="bars bar3"></div>
  <div class="bars bar4"></div>
  <div class="bars bar5"></div>
  <div class="bars bar6"></div>
  <div class="bars bar7"></div>
  <div class="bars bar8"></div>
  <div class="bars bar9"></div>
  <div class="bars bar10"></div>
</div>

<style>
/* From Uiverse.io by Satwinder04 - Tags: loader */
.loader3 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bars {
  width: 10px;
  height: 20px;
  margin: 0 2px;
  border-radius: 4px;
  animation: loader3 3s ease-in-out infinite;
}

.bar1 {
  background-color: #4285F4;
  animation-delay: -0.8s;
}

.bar2 {
  background-color: #4285F4;
  animation-delay: -0.7s;
}

.bar3 {
  background-color: #4285F4;
  animation-delay: -0.6s;
}

.bar4 {
  background-color: #4285F4;
  animation-delay: -0.5s;
}

.bar5 {
  background-color: #4285F4;
  animation-delay: -0.4s;
}

.bar6 {
  background-color: #4285F4;
  animation-delay: -0.3s;
}

.bar7 {
  background-color: #4285F4;
  animation-delay: -0.2s;
}

.bar8 {
  background-color: #4285F4;
  animation-delay: -0.1s;
}

.bar9 {
  background-color: #4285F4;
  animation-delay: 0s;
}

.bar10 {
  background-color: #4285F4;
  animation-delay: 0.1s;
}

@keyframes loader3 {
  0% {
    transform: scale(1);
  }

  20% {
    transform: scale(1, 2.32);
  }

  40% {
    transform: scale(1);
  }
}
</style>

[/hidecontent]