加载动画 · Ugly Yak

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

[hidecontent type="vip1"]

<div id="Loading">
  <div id="loading_div">
    <div id="loading_bouncer"></div>
    <div id="shadow"></div>
  </div>
</div>

<style>
/* From Uiverse.io by DSB2004  - Tags: simple, gradient, loader */
#Loading {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
#loading_div {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
@keyframes bounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-50px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes shadow {
  0% {
    height: 50px;
    width: 50px;
  }
  50% {
    height: 10px;
    width: 10px;
  }
  100% {
    height: 50px;
    width: 50px;
  }
}
#loading_bouncer {
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background: linear-gradient(
    to bottom,
    rgb(89, 0, 255),
    rgb(0, 110, 255),
    rgb(25, 0, 255)
  );
  animation: bounce 500ms ease-in-out infinite;
}
#shadow {
  position: absolute;
  height: 50px;
  width: 50px;
  border-radius: 100%;
  background: black;
  top: 30px;
  transform: rotateX(80deg);
  animation: shadow 500ms ease-in-out infinite;
}

</style>
    

[/hidecontent]