加载动画 · Orange Fox

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

[hidecontent type="vip1"]

<div class="spinner">
<div></div>
</div>
<style>
/* From Uiverse.io by dvhoang2106 - Tags: loader */
.spinner {
 display: inline-block;
 transform: translateZ(1px);
}

.spinner > div {
 display: inline-block;
 width: 64px;
 height: 64px;
 margin: 8px;
 border-radius: 50%;
 background: #fff;
 animation: spinner8344 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

@keyframes spinner8344 {
 0%,
  100% {
  animation-timing-function: cubic-bezier(0.5, 0, 1, 0.5);
 }

 0% {
  transform: rotateY(0deg);
 }

 50% {
  transform: rotateY(1800deg);
  animation-timing-function: cubic-bezier(0, 0.5, 0.5, 1);
 }

 100% {
  transform: rotateY(3600deg);
 }
}
</style>

[/hidecontent]