您的位置: 首页  >  IT文章  >  loading 动画 系列

loading 动画 系列

分类: IT文章 • 2025-01-03 09:39:25

SpinKit – CSS loaders

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

效果：

loading 动画 系列loading 动画 系列loading 动画 系列loading 动画 系列loading 动画 系列loading 动画 系列loading 动画 系列loading 动画 系列loading 动画 系列

查看更多效果，请点击原文链接：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

效果:

loading 动画 系列

代码部分

// 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>

工业风

介绍：

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

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

效果：

loading 动画 系列

代码：

// 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->
      <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-></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->
      <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-></path>
    </svg>
  </div>
</div>

相关推荐