加载动画 · Grumpy Bobcat

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

[hidecontent type="vip1"]

<div class="loader-1">
  <div class="loader-2"></div>
  <div class="loader-3"></div>
  <div class="loader-4"></div>
</div>
<style>
/* From Uiverse.io by omar-alghaish - Tags: loader */
.loader-1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 5px solid rgb(218, 203, 4);
  border-left-color: transparent;
  animation: animate_681 3s linear infinite;
  position: relative;
}

.loader-2 {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 5px solid rgb(0, 119, 255);
  border-top-color: transparent;
  animation: animate_6810 .9s linear infinite;
  position: absolute;
  margin: 5px;
}

.loader-3 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px solid rgb(30, 255, 0);
  border-right-color: transparent;
  animation: animate_681 2s linear  infinite;
  position: absolute;
  margin: 15px;
}

.loader-4 {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 5px solid rgb(194, 3, 92);
  border-bottom-color: transparent;
  animation: animate_6810 .7s linear  infinite;
  position: absolute;
  margin: 25px;
}

@keyframes animate_6810 {
  0% {
    transform: rotate(360deg);
  }
}

@keyframes animate_681 {
  0% {
    transform: rotate(-360deg);
  }
}
</style>

[/hidecontent]