加载动画 · Friendly Termite

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

[hidecontent type="vip1"]

<div class="loader"></div>
<style>
/* From Uiverse.io by bernethe - Tags: loader */
.loader {
  width: 2rem;
  height: 2rem;
  clear: both;
  margin: 1rem auto;
  border: 0.0625rem #000 solid;
  border-radius: .25rem;
  overflow: hidden;
  position: relative;
}

.loader:after, .loader:before {
  content: '';
  border-radius: 50%;
  position: absolute;
  width: inherit;
  height: inherit;
  animation: spVortex 2s infinite linear;
}

.loader:before {
  border-top: 0.375rem #000 solid;
  top: -0.1875rem;
  left: calc( -50% - 0.1875rem );
  transform-origin: right center;
}

.loader:after {
  border-bottom: 0.375rem #000 solid;
  top: 0.1875rem;
  right: calc( -50% - 0.1875rem );
  transform-origin: left center;
}

@keyframes spVortex {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}
</style>

[/hidecontent]