A pure CSS3 implementation of the stripe loading bar

Before for everyone to bring a lot of loading animations. A progress add-on based on the Prefixfree.js, based on the jquery band percentage of the responsive progress add-on bar. Today to share a pure CSS3 implementation of the stripe loading bar. The effect with a responsive style. As follows:

Online preview Source Download

The implemented code.

HTML code:

<class= "container">        <class = "Warning" >        </ Div >    </ Div >

CSS3 Code:

. 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, Transpar Ent 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,, 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

A pure CSS3 implementation of the stripe loading bar