加载动画 · Spicy Warthog

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

[hidecontent type="vip1"]

<div class="spinner"></div>
<style>
/* From Uiverse.io by satyamchaudharydev - Tags: loader */
.spinner {
 display: flex;
 align-items: center;
 justify-content: center;
 position: relative;
 width: 100px;
 height: 100px;
}

.spinner::after {
 content: "";
 position: absolute;
 width: 50px;
 height: 50px;
 background-color: var(--blue);
 animation: flip 1s infinite;
}

@keyframes flip {
 0% {
  transform: rotate(0);
 }

 50% {
  transform: rotateY(180deg);
 }

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

[/hidecontent]