加载动画 · Tough Baboon

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

[hidecontent type="vip1"]

<div class="ball"></div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.ball {
 --size: 20px;
 --timing: 0.7s;
 --displace: 70px;
 border-radius: 50%;
 width: var(--size);
 height: var(--size);
 background: #000;
 margin-right: var(--displace);
 animation: animation321 var(--timing) infinite alternate
    cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

@keyframes animation321 {
 0% {
  background: #4284f3;
  transform: translateX(var(--displace));
 }

 100% {
  background: #ea4335;
  transform: translateX(00px);
 }
}

</style>

[/hidecontent]