加载动画 · Happy Emu

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

[hidecontent type="vip1"]

<div class="wrapper">
  <div class="blue ball"></div>
  <div class="red ball"></div>
  <div class="yellow ball"></div>
  <div class="green ball"></div>
</div>

<style>
/* From Uiverse.io by SteveBloX  - Website: https://codepen.io/travishorn/pen/YyGVRG - Name: Google / Travis Horn - Tags: loader, google, color */
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.ball {
  --size: 16px;
  width: var(--size);
  height: var(--size);
  border-radius: 11px;
  margin: 0 10px;

  animation: 2s bounce ease infinite;
}

.blue {
  background-color: #4285f5;
}

.red {
  background-color: #ea4436;
  animation-delay: 0.25s;
}

.yellow {
  background-color: #fbbd06;
  animation-delay: 0.5s;
}

.green {
  background-color: #34a952;
  animation-delay: 0.75s;
}

@keyframes bounce {
  50% {
    transform: translateY(25px);
  }
}

</style>
    

[/hidecontent]