加载动画 · Silly Grasshopper

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

[hidecontent type="vip1"]

<div class="loader"></div>
<style>
/* From Uiverse.io by JulioCodesSM - Tags: loader */
/* From uiverse.io by @JulioCodesSM */
.loader {
 width: 50px;
 height: 50px;
 position: relative;
 transform: translateX(-25px);
 /* Compensating for the left of 50px in the keyframe. */
}

.loader::before,
.loader::after {
 content: '';
 position: absolute;
 width: inherit;
 height: inherit;
 border-radius: 50%;
 mix-blend-mode: multiply;
 animation: rotate9 1s infinite cubic-bezier(0.77, 0, 0.175, 1);
}

.loader::before {
 background-color: #fc3f9e;
}

.loader::after {
 background-color: #50e8f3;
 animation-delay: .5s;
}

@keyframes rotate9 {
 0%,100% {
  left: 50px;
 }

 25% {
  transform: scale(.3);
 }

 50% {
  left: 0;
 }

 75% {
  transform: scale(1);
 }
}
</style>

[/hidecontent]