loading 动画 系列

SpinKit – CSS loaders

这一系列的 loading 效果，都有个共同的特点，利用好 animation-delay 动画延迟。效果就出来

效果：

查看更多效果，请点击原文链接：https://www.runoob.com/w3cnote/free-html5-css3-loaders-preloaders.html

第一张 loading 图的 css 部分：

.box{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 60vh;
  background-color: #333;
  border: 1px solid #999999;
}
.point{
  position: absolute;
  &::before{
    content: " ";
    display: inline-block;
    border-radius: 50%;
     10px;
    height: 10px;
    background-color: white;
    margin-bottom: 50px;
    animation: transparency 1.2s ease-in-out infinite
  }

  &:nth-child(1){
    transform: rotate(0deg);
  }
  &:nth-child(2){
    transform: rotate(30deg);
    &::before{
      animation-delay: -1.1s;
    }
  }
  &:nth-child(3){
    transform: rotate(60deg);
    &::before{
      animation-delay: -1s;
    }
  }
  &:nth-child(4){
    transform: rotate(90deg);
    &::before{
      animation-delay: -0.9s;
    }
  }
  &:nth-child(5){
    transform: rotate(120deg);
    &::before{
      animation-delay: -0.8s;
    }
  }
  &:nth-child(6){
    transform: rotate(150deg);
    &::before{
      animation-delay: -0.7s;
    }
  }
  &:nth-child(7){
    transform: rotate(180deg);
    &::before{
      animation-delay: -0.6s;
    }
  }
  &:nth-child(8){
    transform: rotate(210deg);
    &::before{
      animation-delay: -0.5s;
    }
  }
  &:nth-child(9){
    transform: rotate(240deg);
    &::before{
      animation-delay: -0.4s;
    }
  }
  &:nth-child(10){
    transform: rotate(270deg);
    &::before{
      animation-delay: -0.3s;
    }
  }
  &:nth-child(11){
    transform: rotate(300deg);
    &::before{
      animation-delay: -0.2s;
    }
  }
  &:nth-child(12){
    transform: rotate(330deg);
    &::before{
      animation-delay: -0.1s;
    }
  }
}

@keyframes transparency{
  0%{opacity: 1;}
  100%{opacity: 0;}
}

html

<div className={styles.box}>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
  <div className={styles.point}></div>
</div>

结语：这些简单的 loading 图就不在介绍，网上也有很多资源，可以去找找灵感。

 

Modern Google Loader

运用 svg

效果:

代码部分

// css
.box{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 60vh;
  background-color: #333;
  border: 1px solid #999999;
}

.circular {
  animation: rotate 2s linear infinite;
  height: 100px;
  transform-origin: center center;
   100px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  // 多个 动画 连写
  animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
  stroke-linecap: round;
  stroke: #d62d20;
}
@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124px;
  }
}
@keyframes color {
  0% {
    stroke: #d62d20;
  }
  40% {
    stroke: #0057e7;
  }
  66% {
    stroke: #008744;
  }
  80%, 90% {
    stroke: #ffa700;
  }
  100%{
    stroke: #d62d20;
  }
}

// html
<div className={styles.box}>
  <svg className={styles.circular} viewBox="25 25 50 50">
    <circle className={styles.path} cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"></circle>
  </svg>
</div>

工业风

介绍：

　　这款实现比较简单，为什么要帖出代码？主要我觉得创意很不错，浓浓的工业风。

　　创意永远比复杂的代码更优秀。

效果：

代码：

// css
.box{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 60vh;
  // background-color: #333;
  border: 1px solid #999999;
}

.big {
   32px;
  height: 32px;
  animation: bigRotate 4s linear infinite;
}
@keyframes bigRotate {
  100% {
    transform: rotate(360deg);
  }
}
.little{
  position: absolute;
  margin-bottom: 35px;
  margin-left: 35px;
   16px;
  height: 16px;
  animation: rotate 2s linear infinite;
}
@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}

// html
<div className={styles.box}>
  <div className={styles.big}>
    <svg t="1596610981079" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3196" width="100%" height="100%">
      <path d="M512 335.194245a176.805755 176.805755 0 1 0 176.805755 176.805755 176.805755 176.805755 0 0 0-176.805755-176.805755z m0 294.676259a117.870504 117.870504 0 1 1 117.870504-117.870504 117.870504 117.870504 0 0 1-117.870504 117.870504z" fill="#2c2c2c" p-id="3197"></path><path d="M937.807194 400.538705h-3.315108a27.846906 27.846906 0 0 1-26.152518-19.595971 426.838561 426.838561 0 0 0-23.426762-56.356835 27.846906 27.846906 0 0 1 4.641151-32.488057l2.35741-2.35741a86.192806 86.192806 0 0 0 0-121.922303l-35.729496-35.729496a86.340144 86.340144 0 0 0-121.922303 0l-2.35741 2.35741a27.846906 27.846906 0 0 1-32.488057 4.641151 422.713094 422.713094 0 0 0-56.356835-23.426762 27.846906 27.846906 0 0 1-19.595971-26.152518v-3.315108A86.340144 86.340144 0 0 0 537.268489 0h-50.536978a86.340144 86.340144 0 0 0-86.192806 86.192806v3.315108a27.846906 27.846906 0 0 1-19.595971 26.152518 422.713094 422.713094 0 0 0-56.356835 23.426762 27.846906 27.846906 0 0 1-32.488057-4.641151l-2.35741-2.35741a86.340144 86.340144 0 0 0-121.922303 0l-35.729496 35.729496a86.192806 86.192806 0 0 0 0 121.922303l2.35741 2.35741a27.846906 27.846906 0 0 1 4.641151 32.488057 426.838561 426.838561 0 0 0-23.426762 56.356835 27.846906 27.846906 0 0 1-26.152518 19.595971h-3.315108A86.340144 86.340144 0 0 0 0 486.731511v50.536978a86.340144 86.340144 0 0 0 86.192806 86.192806h3.315108a27.846906 27.846906 0 0 1 26.152518 19.595971 426.838561 426.838561 0 0 0 23.426762 56.356835 27.846906 27.846906 0 0 1-4.641151 32.488057l-2.35741 2.35741a86.192806 86.192806 0 0 0 0 121.922303l35.729496 35.729496a86.192806 86.192806 0 0 0 121.922303 0l2.35741-2.35741a27.846906 27.846906 0 0 1 32.488057-4.641151 426.838561 426.838561 0 0 0 56.356835 23.426762 27.846906 27.846906 0 0 1 19.595971 26.152518v3.315108a86.340144 86.340144 0 0 0 86.192806 86.192806h50.536978a86.340144 86.340144 0 0 0 86.192806-86.192806v-3.315108a27.846906 27.846906 0 0 1 19.522302-26.152518 419.913669 419.913669 0 0 0 56.430504-23.426762 27.994245 27.994245 0 0 1 32.488057 4.641151l2.35741 2.35741a86.192806 86.192806 0 0 0 121.922303 0l35.729496-35.729496a86.192806 86.192806 0 0 0 0-121.922303l-2.35741-2.35741a27.846906 27.846906 0 0 1-4.641151-32.488057 426.838561 426.838561 0 0 0 23.426762-56.356835 27.846906 27.846906 0 0 1 26.152518-19.595971h3.315108a86.340144 86.340144 0 0 0 86.192806-86.192806v-50.536978a86.340144 86.340144 0 0 0-86.192806-86.192806z m27.257554 136.729784a27.257554 27.257554 0 0 1-27.257554 27.257554h-3.315108a86.63482 86.63482 0 0 0-82.141007 59.966619 356.04259 356.04259 0 0 1-19.890647 48.400575 86.63482 86.63482 0 0 0 15.396834 100.631943l2.35741 2.431079a27.110216 27.110216 0 0 1 0 38.528921l-35.729496 35.729496a27.846906 27.846906 0 0 1-38.528921 0l-2.35741-2.35741A86.782158 86.782158 0 0 0 672.893237 832.460432a356.04259 356.04259 0 0 1-48.400575 20.037985 86.63482 86.63482 0 0 0-59.966619 82.141007v3.315108a27.257554 27.257554 0 0 1-27.257554 27.257554h-50.536978a27.257554 27.257554 0 0 1-27.257554-27.257554v-3.388777a86.63482 86.63482 0 0 0-59.966619-82.067338 359.94705 359.94705 0 0 1-48.400575-20.037985 88.402878 88.402878 0 0 0-39.854964-9.576979 85.82446 85.82446 0 0 0-60.776979 24.973813l-2.35741 2.35741a27.846906 27.846906 0 0 1-38.528921 0l-35.729496-35.729496a27.110216 27.110216 0 0 1 0-38.528921l2.35741-2.431079A86.63482 86.63482 0 0 0 191.539568 672.893237a356.04259 356.04259 0 0 1-20.037985-48.400575 86.63482 86.63482 0 0 0-82.141007-59.966619h-3.16777a27.257554 27.257554 0 0 1-27.257554-27.257554v-50.536978a27.257554 27.257554 0 0 1 27.257554-27.257554h3.315108a86.63482 86.63482 0 0 0 82.141007-59.966619 356.04259 356.04259 0 0 1 19.890647-48.400575A86.63482 86.63482 0 0 0 176.142734 250.47482l-2.35741-2.431079a27.110216 27.110216 0 0 1 0-38.528921l35.729496-35.729496a27.257554 27.257554 0 0 1 38.528921 0l2.35741 2.35741A86.782158 86.782158 0 0 0 351.106763 191.539568a356.04259 356.04259 0 0 1 48.400575-20.037985 86.63482 86.63482 0 0 0 59.966619-82.141007v-3.16777a27.257554 27.257554 0 0 1 27.257554-27.257554h50.536978a27.257554 27.257554 0 0 1 27.257554 27.257554v3.315108a86.63482 86.63482 0 0 0 59.966619 82.141007 356.04259 356.04259 0 0 1 48.400575 19.890647A86.782158 86.782158 0 0 0 773.52518 176.142734l2.35741-2.35741a27.331223 27.331223 0 0 1 38.528921 0l35.729496 35.729496a27.110216 27.110216 0 0 1 0 38.528921l-2.35741 2.431079A86.63482 86.63482 0 0 0 832.460432 351.106763a363.998849 363.998849 0 0 1 20.037985 48.400575 86.63482 86.63482 0 0 0 82.141007 59.966619h3.315108a27.257554 27.257554 0 0 1 27.257554 27.257554z" fill="#2c2c2c" p-id="3198"></path>
    </svg>
  </div>
  <div className={styles.little}>
    <svg t="1596610981079" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3196" width="100%" height="100%">
      <path d="M512 335.194245a176.805755 176.805755 0 1 0 176.805755 176.805755 176.805755 176.805755 0 0 0-176.805755-176.805755z m0 294.676259a117.870504 117.870504 0 1 1 117.870504-117.870504 117.870504 117.870504 0 0 1-117.870504 117.870504z" fill="#707070" p-id="3197"></path><path d="M937.807194 400.538705h-3.315108a27.846906 27.846906 0 0 1-26.152518-19.595971 426.838561 426.838561 0 0 0-23.426762-56.356835 27.846906 27.846906 0 0 1 4.641151-32.488057l2.35741-2.35741a86.192806 86.192806 0 0 0 0-121.922303l-35.729496-35.729496a86.340144 86.340144 0 0 0-121.922303 0l-2.35741 2.35741a27.846906 27.846906 0 0 1-32.488057 4.641151 422.713094 422.713094 0 0 0-56.356835-23.426762 27.846906 27.846906 0 0 1-19.595971-26.152518v-3.315108A86.340144 86.340144 0 0 0 537.268489 0h-50.536978a86.340144 86.340144 0 0 0-86.192806 86.192806v3.315108a27.846906 27.846906 0 0 1-19.595971 26.152518 422.713094 422.713094 0 0 0-56.356835 23.426762 27.846906 27.846906 0 0 1-32.488057-4.641151l-2.35741-2.35741a86.340144 86.340144 0 0 0-121.922303 0l-35.729496 35.729496a86.192806 86.192806 0 0 0 0 121.922303l2.35741 2.35741a27.846906 27.846906 0 0 1 4.641151 32.488057 426.838561 426.838561 0 0 0-23.426762 56.356835 27.846906 27.846906 0 0 1-26.152518 19.595971h-3.315108A86.340144 86.340144 0 0 0 0 486.731511v50.536978a86.340144 86.340144 0 0 0 86.192806 86.192806h3.315108a27.846906 27.846906 0 0 1 26.152518 19.595971 426.838561 426.838561 0 0 0 23.426762 56.356835 27.846906 27.846906 0 0 1-4.641151 32.488057l-2.35741 2.35741a86.192806 86.192806 0 0 0 0 121.922303l35.729496 35.729496a86.192806 86.192806 0 0 0 121.922303 0l2.35741-2.35741a27.846906 27.846906 0 0 1 32.488057-4.641151 426.838561 426.838561 0 0 0 56.356835 23.426762 27.846906 27.846906 0 0 1 19.595971 26.152518v3.315108a86.340144 86.340144 0 0 0 86.192806 86.192806h50.536978a86.340144 86.340144 0 0 0 86.192806-86.192806v-3.315108a27.846906 27.846906 0 0 1 19.522302-26.152518 419.913669 419.913669 0 0 0 56.430504-23.426762 27.994245 27.994245 0 0 1 32.488057 4.641151l2.35741 2.35741a86.192806 86.192806 0 0 0 121.922303 0l35.729496-35.729496a86.192806 86.192806 0 0 0 0-121.922303l-2.35741-2.35741a27.846906 27.846906 0 0 1-4.641151-32.488057 426.838561 426.838561 0 0 0 23.426762-56.356835 27.846906 27.846906 0 0 1 26.152518-19.595971h3.315108a86.340144 86.340144 0 0 0 86.192806-86.192806v-50.536978a86.340144 86.340144 0 0 0-86.192806-86.192806z m27.257554 136.729784a27.257554 27.257554 0 0 1-27.257554 27.257554h-3.315108a86.63482 86.63482 0 0 0-82.141007 59.966619 356.04259 356.04259 0 0 1-19.890647 48.400575 86.63482 86.63482 0 0 0 15.396834 100.631943l2.35741 2.431079a27.110216 27.110216 0 0 1 0 38.528921l-35.729496 35.729496a27.846906 27.846906 0 0 1-38.528921 0l-2.35741-2.35741A86.782158 86.782158 0 0 0 672.893237 832.460432a356.04259 356.04259 0 0 1-48.400575 20.037985 86.63482 86.63482 0 0 0-59.966619 82.141007v3.315108a27.257554 27.257554 0 0 1-27.257554 27.257554h-50.536978a27.257554 27.257554 0 0 1-27.257554-27.257554v-3.388777a86.63482 86.63482 0 0 0-59.966619-82.067338 359.94705 359.94705 0 0 1-48.400575-20.037985 88.402878 88.402878 0 0 0-39.854964-9.576979 85.82446 85.82446 0 0 0-60.776979 24.973813l-2.35741 2.35741a27.846906 27.846906 0 0 1-38.528921 0l-35.729496-35.729496a27.110216 27.110216 0 0 1 0-38.528921l2.35741-2.431079A86.63482 86.63482 0 0 0 191.539568 672.893237a356.04259 356.04259 0 0 1-20.037985-48.400575 86.63482 86.63482 0 0 0-82.141007-59.966619h-3.16777a27.257554 27.257554 0 0 1-27.257554-27.257554v-50.536978a27.257554 27.257554 0 0 1 27.257554-27.257554h3.315108a86.63482 86.63482 0 0 0 82.141007-59.966619 356.04259 356.04259 0 0 1 19.890647-48.400575A86.63482 86.63482 0 0 0 176.142734 250.47482l-2.35741-2.431079a27.110216 27.110216 0 0 1 0-38.528921l35.729496-35.729496a27.257554 27.257554 0 0 1 38.528921 0l2.35741 2.35741A86.782158 86.782158 0 0 0 351.106763 191.539568a356.04259 356.04259 0 0 1 48.400575-20.037985 86.63482 86.63482 0 0 0 59.966619-82.141007v-3.16777a27.257554 27.257554 0 0 1 27.257554-27.257554h50.536978a27.257554 27.257554 0 0 1 27.257554 27.257554v3.315108a86.63482 86.63482 0 0 0 59.966619 82.141007 356.04259 356.04259 0 0 1 48.400575 19.890647A86.782158 86.782158 0 0 0 773.52518 176.142734l2.35741-2.35741a27.331223 27.331223 0 0 1 38.528921 0l35.729496 35.729496a27.110216 27.110216 0 0 1 0 38.528921l-2.35741 2.431079A86.63482 86.63482 0 0 0 832.460432 351.106763a363.998849 363.998849 0 0 1 20.037985 48.400575 86.63482 86.63482 0 0 0 82.141007 59.966619h3.315108a27.257554 27.257554 0 0 1 27.257554 27.257554z" fill="#707070" p-id="3198"></path>
    </svg>
  </div>
</div>