效果一

HTML

CSS

.zh-loading{position: absolute;z-index: 9;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.75);}.zh-loading ul{position: absolute;z-index: 2;left: 50%;top: 50%;height: 60px;overflow: hidden;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}.zh-loading ul li{float: left;height: 100%;width: 4px;margin: 0 2px;background-color: #ccc;-webkit-animation: stretchdelay 1.2s infinite ease-in-out;animation: stretchdelay 1.2s infinite ease-in-out;}.zh-loading ul li:nth-of-type(2){-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}.zh-loading ul li:nth-of-type(3){-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}.zh-loading ul li:nth-of-type(4){-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}@-webkit-keyframes stretchdelay{0%, 40%, 100%{-webkit-transform: scaleY(0.4)}20%{-webkit-transform: scaleY(1.0)}}@keyframes stretchdelay{0%, 40%, 100%{transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}20%{transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}

效果二

效果三

HTML

CSS

.zh-loading{display: none;margin: 1rem auto 0;width: 34px;height: 34px;}.zh-loading li{float: left;width: 14px;height: 14px;margin: 2px 0 0 2px;background-color: #F2F2F2;}.zh-loading li:nth-of-type(1){-webkit-animation: loadingEffect 1s ease 1s infinite;-ms-animation: loadingEffect 1s ease 1s infinite;animation: loadingEffect 1s ease 1s infinite;}.zh-loading li:nth-of-type(2){-webkit-animation: loadingEffect 1s ease .25s infinite;-ms-animation: loadingEffect 1s ease .25s infinite;animation: loadingEffect 1s ease .25s infinite;}.zh-loading li:nth-of-type(3){-webkit-animation: loadingEffect 1s ease .75s infinite;-ms-animation: loadingEffect 1s ease .75s infinite;animation: loadingEffect 1s ease .75s infinite;}.zh-loading li:nth-of-type(4){-webkit-animation: loadingEffect 1s ease .5s infinite;-ms-animation: loadingEffect 1s ease .5s infinite;animation: loadingEffect 1s ease .5s infinite;}@-webkit-keyframes loadingEffect{    to{background-color: #BCBCBC;}}@-ms-keyframes loadingEffect{    to{background-color: #BCBCBC;}}@keyframes loadingEffect{    to{background-color: #BCBCBC;}}

参考文章：