加载动画 · Unlucky Wolverine

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

[hidecontent type="vip1"]

<div class="loader">
<div class="bar" id="red"></div>
<div class="bar" id="mint"></div>
<div class="bar" id="grey"></div>
<div class="bar" id="purple"></div>
</div>
<style>
/* From Uiverse.io by bhaveshxrawat - Tags: loader */
.loader {
 display: flex;
 justify-content: center;
 align-content: center;
 align-items: center;
 gap: 5px;
 height: 80px;
 width: 80px;
}

.bar {
 width: 7px;
 height: 50px;
 border-radius: 10em;
 background-image: linear-gradient(60deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
 background-size: 390%;
 animation: live 2s linear infinite;
}

@keyframes live {
 0%, 50%, 100% {
  transform: scaleY(1);
 }

 30%, 70% {
  background-position: right;
  transform: scaleY(1.15);
 }
}
</style>

[/hidecontent]