CSS实现多种loading

[ElonXun]

One

核心代码:

  .loading{
            width: 70px;
            height: 200px;
            margin: auto;
            display: flex;
        }
        .loading span{
            display: inline-block;
            width: 8px;
            height: 40px;
            border-radius: 4px;
            background: #91d5ff;
            margin: auto;
            -webkit-animation: load 1s ease infinite;
        }
        @-webkit-keyframes load{
            0%,100%{
                height: 40px;
                background: #91d5ff;
            }
            50%{
                height: 80px;
                background: #40a9ff;
            }
        }
        .loading span:nth-child(2){
            -webkit-animation-delay:0.2s;
        }
        .loading span:nth-child(3){
            -webkit-animation-delay:0.4s;
        }
        .loading span:nth-child(4){
            -webkit-animation-delay:0.6s;
        }
        .loading span:nth-child(5){
            -webkit-animation-delay:0.8s;
        }

jsfiddle传送门

---

Two

核心代码:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:8px;
   background:#91d5ff;
   border-radius:4px;
   margin:auto;
   display: flex;
   align-items:center;
   -webkit-animation: load 1.2s ease-in-out infinite alternate;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  -webkit-animation: loadSpan 1.2s ease-in-out infinite alternate;
}

@-webkit-keyframes load{
  0%{
      background:#91d5ff;
  }  
  100%{
      background:#69c0ff;
    }
}

@-webkit-keyframes loadSpan{
  0%{
      background:#91d5ff;
  }  
  100%{
      margin-left:142px;
      background:#69c0ff;
    }
}

jsfiddle传送门

---

Three

核心代码:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:80px;
   margin:auto;
   display: flex;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  margin:auto;
  -webkit-animation: loadSpan 1s ease infinite;
}

@-webkit-keyframes loadSpan{
  0%{
      opacity：1;
  }  
  100%{
      opacity:0;
    }
}

.loading span:nth-child(2){
  -webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
  -webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
  -webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
  -webkit-animation-delay:0.8s;
}

jsfiddle传送门

---

Four

核心代码:

.container{
  width:100%;
  height:100%;
  display:flex;
}

.loading{
   width:160px;
   height:80px;
   margin:auto;
   display: flex;
}         

.loading span{
  display:inline-block;
  width:18px;
  height:18px;
  background:#91d5ff;
  border-radius:9px;
  margin:auto;
  -webkit-animation: loadSpan 1.2s ease infinite;
}

@-webkit-keyframes loadSpan{
  0%{
      opacity：1;
  }  
  100%{
      opacity:0;
      -webkit-transform: scale(0.3);
    }
}

.loading span:nth-child(2){
  -webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
  -webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
  -webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
  -webkit-animation-delay:0.8s;
}

jsfiddle传送门

Five

核心代码:

.container{
  width: 100px;
  height: 100px;
  margin: auto;
  display: flex;
  align-items: center;
}

.loading{
  width: 42px;
  height: 42px;
  /* margin: auto;
  display: flex; */
}

.circular{
  height: 42px;
  width: 42px;
  -webkit-animation: loading-rotate 2s linear infinite;
  animation: loading-rotate 2s linear infinite
}

.path{
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90,150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: #409eff;
  stroke-linecap: round;
}

@keyframes loading-dash {
    0% {
        stroke-dasharray: 1,200;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -40px
    }

    100% {
        stroke-dasharray: 90,150;
        stroke-dashoffset: -120px
    }
}

@keyframes loading-rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

jsfiddle传送门