加载动画 · Ancient Mule

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

[hidecontent type="vip1"]

<div class="spinner">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
</div>
<style>
/* From Uiverse.io by Mike11jr - Tags: loader */
.spinner {
 flex-direction: row;
 display: flex;
 align-items: center;
 justify-content: center;
}

.dot1, .dot2, .dot3 {
 width: 15px;
 height: 15px;
 border: double;
 border-color: white;
 border-radius: 50%;
 margin: 10px;
}

.dot1 {
 animation: jump765 1.6s -0.32s linear infinite;
 background: #2495ff;
}

.dot2 {
 animation: jump765 1.6s -0.16s linear infinite;
 background: #2495ff;
}

.dot3 {
 animation: jump765 1.6s linear infinite;
 background: #2495ff;
}

@keyframes jump765 {
 0%, 80%, 100% {
  -webkit-transform: scale(0);
  transform: scale(0);
 }

 40% {
  -webkit-transform: scale(2.0);
  transform: scale(2.0);
 }
}


</style>

[/hidecontent]