加载动画 · Purple Snail

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

[hidecontent type="vip1"]

<div class="loader"></div>
<style>
/* From Uiverse.io by bernethe - Tags: loader */
.loader {
  clear: both;
  margin: 1rem auto;
  width: 3.125rem;
  height: 1.125rem;
  border: 1px #000 solid;
  border-radius: 4px;
  background: linear-gradient(-60deg, transparent 0%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);
  background-size: 20px 30px;
  background-position: 0px 0px;
  animation: spLoadBar 0.8s infinite linear;
}

@keyframes spLoadBar {
  from {
    background-position: 0px 0px;
  }

  to {
    background-position: -20px 0px;
  }
}
</style>

[/hidecontent]