加载动画 · Red Baboon

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

[hidecontent type="vip1"]

<div class="loader">
  <span><</span>
  <span>LOADING</span>
  <span>/></span>
</div>

<style>
/* From Uiverse.io by Subaashbala  - Tags: loader, smooth, loading animation */
.loader {
  font-size: 2em;
  font-weight: 900;
}
.loader > * {
  color: black;
}
.loader span {
  display: inline-flex;
}
.loader span:nth-child(2) {
  letter-spacing: -1em;
  overflow: hidden;
  animation: reveal 1500ms cubic-bezier(0.645, 0.045, 0.355, 1) infinite
    alternate;
}
@keyframes reveal {
  0%,
  100% {
    opacity: 0.5;
    letter-spacing: -1em;
  }
  50% {
    opacity: 1;
    letter-spacing: 0em;
  }
}

</style>
    

[/hidecontent]