《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%; width: 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; width: 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 { width: 32px; height: 32px; animation: bigRotate 4s linear infinite; } @keyframes bigRotate { 100% { transform: rotate(360deg); } } .little{ position: absolute; margin-bottom: 35px; margin-left: 35px; width: 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>
