CSS加载动画

• css-loader - GitHub开源库地址
  • Demo
  • 特点：
    • CSS代码生成

案例

/* <span class="loader"></span> */
.loader {
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-bottom-color: #FF3D00;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  }

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

• CSS Loaders
  • 特点：
    • CSS代码生成

案例

/* HTML: <div class="loader"></div> */
.loader {    
  width: 70px;
  height: 70px;
  padding: 10px;
  box-sizing: border-box;
  background: #fff;
  mix-blend-mode: darken;
  display: grid;
  filter: blur(4px) contrast(10) hue-rotate(270deg);
}
.loader:before,
.loader:after {
  content:"";
  grid-area: 1/1;
  animation: l2 3s infinite linear;
  background:#ff00ff;
  border-radius: 50%;
}
.loader:after {
  animation-delay: -.8s;
}
@keyframes l2{
  12.5% {border-radius: 37% 63% 70% 30% / 30% 62% 38% 70%}
  25%   {border-radius: 84% 16% 15% 85% / 55% 79% 21% 45%}
  37.5% {border-radius: 73% 27% 74% 26% / 64% 32% 68% 36%}
  50%   {border-radius: 73% 27% 18% 82% / 52% 32% 68% 48%}
  62.5% {border-radius: 33% 67% 18% 82% / 52% 75% 25% 48%}
  75%   {border-radius: 12% 88% 69% 31% / 10% 66% 34% 90%}
  87.5% {border-radius: 50% 50% 70% 30% / 52% 62% 38% 48%}
}

• loading.io
  • 特点：
    • GIF / SVG / APNG / CSS / LOTTIE / MP4 等格式