加载动画 · Popular Snake

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

[hidecontent type="vip1"]

<div class="loader">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.loader {
 --size: 40px;
 display: flex;
 gap: 0.6rem;
}

.box {
 width: var(--size);
 height: var(--size);
 background: #0270e1;
 animation: rotate 2s infinite;
}

.box:nth-child(2) {
 animation-delay: 0.25s;
}

.box:nth-child(3) {
 animation-delay: 0.5s;
}

@keyframes rotate {
 50% {
  transform: rotate(180deg)
 }
}
</style>

[/hidecontent]