之前为大家带来了很多加载动画。 基于prefixfree.js的进度加载条 ，基于jquery带百分比的响应式进度加载条。今天给大家分享一款纯css3实现的条纹加载条。带有响应式的效果。效果图如下 ：
在线预览 源码下载
实现的代码。
html代码：
<div class="container"> <div class="warning"> </div> </div>
css3代码：
.warning { position: relative; background-color: #6DA807; border: 1px solid #6DA807; border-radius: 10px; box-shadow: 1vw 3vh 10vh rgba(109, 168, 7, 0.8); background-size: 3em 3em; background-image: linear-gradient(-45deg, transparent 0em, transparent 0.8em, #96D923 0.9em, #96D923 2.1em, transparent 2.1em, transparent 2.9em, #96D923 3.1em); -webkit-animation: warning-animation 750ms infinite linear; -moz-animation: warning-animation 750ms infinite linear; animation: warning-animation 750ms infinite linear;}@-webkit-keyframes warning-animation { 0% { background-position: 0 0; } 100% { background-position: 3em 0; }}@-moz-keyframes warning-animation { 0% { background-position: 0 0; } 100% { background-position: 3em 0; }}@keyframes warning-animation { 0% { background-position: 0 0; } 100% { background-position: 3em 0; }}.warning:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; border-radius: 10px; background-image: linear-gradient(to bottom, #6DA807, rgba(171, 226, 77, 0.6) 15%, transparent 60%, #6DA807);}body, html { position: absolute; top: 0; left: 0; bottom: 0; right: 0; height: 100%;}body { background-repeat: no-repeat; background-position: center; background-image: radial-gradient(circle, #c0e979, #96d923);}.container { width: 80vw; margin: 45vh auto 0;}.container .warning { height: 10vh;}via：http://www.w2bc.com/Article/18415
