核心代码:.loading{width:70px;高度：200px；保证金：自动；显示：弹性；}.loadingspan{显示：内联块；宽度：8px；高度：40px；边界半径：4px；背景：#91d5ff；保证金：自动；-webkit-animation:load1seaseinfinite;}@-webkit-keyframesload{0%,100%{高度：40px；背景：#91d5ff；}50%{高度：80px；背景：#40a9ff；}}.loadingspan:nth-child(2){-webkit-animation-delay:0.2s;}.loadingspan:nth-child(3){-webkit-animation-delay:0.4s;}.loadingspan:nth-child(4){-webkit-animation-delay:0.6s;}.loadingspan:nth-child(5){-webkit-animation-delay:0.8s;}jsfiddle传送门二核心代码:.container{width:100%;高度：100%；显示：flex;}.loading{宽度：160px;高度：8px；背景：#91d5ff；边界半径小号：4px；保证金：自动；显示：弹性；对齐项目：居中；-webkit-animation:load1.2sease-in-out无限交替;}.loadingspan{display:inline-block;宽度：18px；高度：18px；背景：#91d5ff；边界半径：9px；-webkit-animation:loadSpan1.2sease-in-out无限交替;}@-webkit-keyframesload{0%{background:#91d5ff;}100%{背景：#69c0ff；}}@-webkit-keyframesloadSpan{0%{背景：#91d5ff；}100%{左边距：142px；背景：#69c0ff；}}jsfiddle传送门三核心代码:.container{width:100%;高度：100%；显示：flex;}.loading{宽度：160px;高度：80px；保证金：自动；显示：flex；}.loadingspan{显示：内联块；宽度：18px；高度：18px；背景：#91d5ff；边界半径：9px；保证金：自动；-webkit-animation:loadSpan1seaseinfinite;}@-webkit-keyframesloadSpan{0%{不透明度：1;}100%{不透明度：0;}}.loadingspan:nth-child(2){-webkit-animation-delay:0.2s;}.loadingspan:nth-child(3){-webkit-animation-delay:0.4s;}.loadingspan:nth-child(4){-webkit-animation-delay:0.6s;}.loadingspan:nth-child(5){-webkit-animation-delay:0.8s;}jsfiddle传送门四核心代码:.container{width:100%;高度：100%；显示：flex;}.loading{宽度：160px;高度：80px；保证金：自动；显示：flex；}.loadingspan{显示：内联块；宽度：18px；高度：18px；背景：#91d5ff；边界半径：9px；保证金：自动；-webkit-animation:loadSpan1.2seaseinfinite;}@-webkit-keyframesloadSpan{0%{不透明度：1;}100%{不透明度：0;-webkit-转换：规模（0.3）；}}.loadingspan:nth-child(2){-webkit-animation-delay:0.2s;}.loadingspan:nth-child(3){-webkit-animation-delay:0.4s;}.loadingspan:nth-child(4){-webkit-animation-delay:0.6s;}.loadingspan:nth-child(5){-webkit-animation-delay:0.8s;}jsfiddle传送门ps:参考CSS3实现18种Loading效果未完成等待
