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;    }

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;    }}

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;}

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;}

ps:参考

未完待续